How to try out the Ember Inspector in Google Chrome

by Kasper Tidemann

Yehuda Katz has been working on Ember Inspector, an extension for Google Chrome that exposes what happens with views, controllers, objects etc. when running an Ember.js application.

There’s already a few videos demonstrating the inspector, including Ember Inspector: Live Controllers. It will be officially available with the release of Ember.js version 1.0, but you can go ahead and try it out now. Here’s a quick guide:

  • Go to github.com/tildeio/ember-extension and download the ZIP file
  • Unzip the file and fire up Google Chrome
  • Visit chrome://flags and enable “Experimental Extension APIs” in the list
  • Restart Google Chrome
  • Go to the Extensions page and ensure that the “Developer Mode” checkbox is checked
  • Click “Load unpacked extension…” and select the extension_dist folder
  • Restart Google Chrome and bring up the Developer Tools
  • Click “Ember” at the far right of the tab menu

That’s it. If all went okay, you should be seeing something like this in your Developer Tools menu. Happy inspecting!

(As a side note, in Google Chrome 24.x, it even had a nice, little icon.)