vue-devtools Chrome Extension in Firefox

When I wrote this post in March, only a Chrome vue-devtools extension was available. Using the Chrome Store Foxified add-on, this post documents installing the vue-devtools Chrome extension into Firefox for debugging Vue.js applications. However, as of June 20, an official Firefox Addon is available.

Vue.js (@vuejs) tweeted at 1:22 AM on Tue, Jun 20, 2017:vue-devtools is now officially available as a Firefox Addon]( extension for debugging Vue.js applications


I’m using the Firefox Developer Edition for this install. It should also work with Firefox and Aurora (Firefox Developer Edition) for Android.

Install the Chrome Store Foxified add-on. The Mozilla WebExtensions cross-browser API supports a growing number of Chrome extensions and this add-on facilitates installing them in Firefox.

You will need to be signed into with your Firefox account to install the add-on normally. Search for vue-devtools at the Chrome Web Store.

Select the Add to Firefox button.

In the Vue.js devtools dialog, Select Just Sign and Download.

Foxified - Vue.js devtools sign and download dialog. The Google Chrome extension has been fetched and converted into Firefox  format. Would you like to install the addon normally or temporarily?

Another Vue.js devtools dialog appears after the add-on is processed. select Save Signed Addon To File.

Foxified - Vue.js devtools sign and download dialog. All process complete. Choose from any of the actions below. Note: WebExtensions API is not yet complete by Mozilla so all extensions may not work yet.

Navigate to the Firefox Add-ons manager, about:addons and select Extensions from the sidebar.

Add-ons Manager

Open the Tools for all add-ons dropdown gear next to the search all ad-ons input. Select Install Add-on From File. Browse for the .xpi file that was downloaded.

Add-ons Manager - Tools for all add-ons

Restart Firefox to begin using the vue-devtools.

comments powered by Disqus