Vue devtools tab not showing up in firefox devtools

[uhexos]

Version

6.0.0-beta.15

Browser and OS info

Firefox 89.02/ Linux Mint 20.1 Cinnamon

Steps to reproduce

After installing the vue dev tools xpi from the beta channel I am unable to see the vue devtool tab in the console area. Vue is installed using vite if that makes a difference.

What is expected?

To see the dev tools extension in the firefox developer tools tabs

What is actually happening?

The tab never appears but it shows Vue.js is detected on this page.

[cedon]

Also having this issue. Same version of devtools.

Browser and OS info
Firefox Developer Edition 91.0b9 / Windows 10.0.19043.1110

[piperone]

Same on mac.

Browser and OS info
FIrefox Developer Edition 92.0b3 / macOS Big Sur 11.4

[YYangLee]

You can try this:
Add this code in main.js
if (process.env.NODE_ENV === 'development') {
Vue.config.devtools = true
if (typeof window.__VUE_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined') {
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', Vue)
}
}

[m-z-b]

Had the same problem with Firefox (both Ubuntu 20 and Windows 11 versions) with version 6.0.0.18.

Solution (for me) was toggling the Vue.js devtools option in the Web Developer Tools / Settings

Can reproduce problem by deleting the Firefox config variable
devtools.webextensions.{c087fa6e-b59f-475d-b08d-f03fef34fa7f}.enabled

The extension is then shown as enabled in Web Developer Tools/Settings but the tab does not appear. Possibly two different uses of this config value are assuming a different default if the setting is missing.

[haotan19]

Same here. Toggling on and off the devtools solved my problem.

[AndreasNasman]

I had the same problem since the tab was disabled in my dev tools settings; not sure when/why it was disabled. It would be nice if the extension could warn about this or auto-enable it when the extension is activated.

This is where you check if the tab is enabled in Firefox Developer Tools: