Get Ember Inspector working in Firefox (Quantum) Developer Edition

by Justin Smestad

What changed?

Turns out that Firefox is changing their extension API to match Chrome's popular WebExtension API. That means if you are on one of Mozilla's new Firefox Quantum builds, none of your existing Firefox plugins will work.

Build Ember Inspector

You have to install build and install the ember inspector by hand. Here are the steps:

git clone git@github.com:emberjs/ember-inspector.git && \
   cd ember-inspector && \
   npm install -g bower ember-cli grunt-cli && \
   yarn install && \
   bower install && \
   npm run build:production

This will create a file located at dist/firefox/ember-inspector.zip.

Install into Firefox

We are going to follow Mozilla's guide to installing a temporary add-on.

To install an extension temporarily:

  • open Firefox
  • enter "about:debugging" in the URL bar
  • click "Load Temporary Add-on"
  • open the extension's directory and select any file inside the extension.

The file you want to select is that ember-inspector.zip we mentioned above. You will likely see an error about a signature, but ignore that.

Fin

That's it. If you open up DevTools, you should see the Ember Inspector icon in the header.

The Ember team has submitted an updated plugin, but this should get you going in the meantime.