Firefox Extension Not Working Anymore

[JoeyofBladez]

I am having issues with the Firefox extension that used to work just fine with our Laravel/Vue3 project. I would like some help troubleshooting as I don't want to switch to Chrome, where it works for me.

Symptoms

1. Vue tab does not appear in developer tools.
2. In "Settings" for developer tools, I do see the "Vue.js devtools" item under "Developer Tools installed by add-ons", and the box is checked.
3. With the extension pinned to the toolbar, the icon is lit up and reports "Vue.js is detected on this page."

Attempted Fixes

1. I have both "Run in Private Windows" and "Run on sites with restrictions" set to allow.
2. I tried uninstalling and reinstalling the extension several times.
3. I tried the "refresh" option Firefox gives when you uninstall it, didn't work.

I looked at the only item on the "troubleshooting" page and I'm not seeing the config file referenced nor any of the code in my codebase. I don't think we set up the vite plugin, the extension just worked from when I started using it several years ago and has not been working since I recently came back to the Laravel/Vue3 project we are working on.

I also noticed that the Firefox extension is not listed on the "installation" page, but the last update according to Firefox was December 3, 2025. I can't imagine the extension is no longer supported?

[ismaildasci]

this is a known issue with firefox and vue devtools. happens because of how firefox handles extension permissions and content scripts.

try these fixes:

1. first try force refreshing the devtools: close devtools completely, then press F12 to reopen. sometimes the vue tab needs a full reload to appear.

2. check if vue is in production mode. devtools only works with development builds. in your vite.config or build settings make sure:

// vite.config.js
export default {
  define: {
    __VUE_PROD_DEVTOOLS__: true // force enable in prod
  }
}

3. for laravel/vue projects specifically, check if youre using vite or mix. if mix:

// webpack.mix.js
mix.webpackConfig({
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm-bundler.js"
    }
  }
});

4. try the standalone electron app version of vue devtools. download from github releases and it connects via websocket, bypasses firefox extension issues.

5. in your main.js make sure you have:

const app = createApp(App);
app.config.devtools = true; // explicitly enable

6. some users fixed it by downgrading to an older firefox version temporarily, using the devtools, then updating again. not ideal but works.

7. check about:debugging#/runtime/this-firefox in firefox and see if the extension shows any errors.

the extension is still supported for firefox, just has some compatibility issues with newer firefox versions. chrome version is more stable if you need it working urgently.

[JoeyofBladez]

We decided to replace mix with vite because mix is no longer being actively maintained and it wasn't too hard to throw into the queue. As a result, the extension works fine now. I really appreciate your help @ismaildasci but it seems we solved our own problem unintentionally!