Vue-devtools: It doesn't appear in dev tools on Firefox

[step135]

Version

6.0.0-beta.2

Browser and OS info

Firefox 83.0

Steps to reproduce

After fresh install of Firefox without any other extensions, this extension doesn't appear there.

What is expected?

Extension should be added to developer tools.

What is actually happening?

It is not there even though it is unique extension so it can not collide with other extensions.

[weleoka]

Works for me: close devtools after enabing extension. Then open them again and you should see the Vue icon.

[ameotoko]

Works for me: close devtools after enabing extension. Then open them again and you should see the Vue icon.

This worked in Chrome as well, thanks.

[3nuc]

I consistently faced this issue on -beta.2 and noticed in on -beta.3 also. I'm using Firefox Nightly 86.0a1.

1. vue create someapp --default && cd someapp && npm run serve
2. go to localhost 8080 in firefox
3. press f12
4. vue devtools tab is not visible in devtools

The biggest problem is that each time a different solution works:

• sometimes it's "close localhost tab, close devtools, disable vue addon, enable vue addon, reopen localhost tab and press f12 to reopen devtools"
• other times it's the above but you also need to restart firefox before re-enabling vue addon
  I understand this doesn't even come close to useful repro steps, but this is legitimately what happens. Are there any debug logs I can collect for vue devtools to provide some more detail?

A similar issue happens from time to time with Vue 2 devtools to my colleagues using both Firefox and Chrome.

EDIT: Hmm, Vue tab showed up before I updated Nightly (nightly gets several updates everyday), but after I clicked "Update & restore", the Vue tab wouldn't pop up. Perhaps it's an issue where the devtools won't show up after an update and require a manual reset after one?

[LeBenLeBen]

I can reproduce this issue on Firefox 84.0.1 using at least beta 2 & 3. The extension icon is visible, Vue is detected, but the panel is not visible in the inspector. I tried to update the plugin, restart Firefox, nothing works.

I’m using Vue 3 with a Vite server.

[lucacataldo]

In case anyone has the issue where the Vue Devtools Extension detects Vue but doesn't show up in the firefox devtools I was able to fix it by:

1. Open devtools when Vue says "VueJS is detected on this page"
2. Click the 3 dots on the right of the devtools panel (next to the X to close)
3. Click "Settings"
4. Check Vue.js devtools under "Developer Tools installed by addons"

[LeBenLeBen]

This setting is already checked for me and toggling it doesn’t fix the issue 😭

[lucacataldo]

@LeBenLeBen Ah that's a shame, sorry. I just thought I'd share since that fixed it in my situation.

[metal3d]

Vue JS 3, locally started:

I tried to remove, reinstall, close firefox, and so on... Nothing...

And not error in console:

Firefox 84.0.1 on Fedora 33

Ha and, it doesn't work on Chrome/Brave ... Seems that something goes wrong with Vue 3

[metal3d]

OK... Sorry...

https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension