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.

](https://twitter.com/vuejs/status/877033866749456384?s=09)DevTools extension for debugging Vue.js applications

Installation

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 addons.mozilla.org/firefox 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.

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

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

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.

Restart Firefox to begin using the vue-devtools.