Ember Inspector is a Google Chrome Inspector extension for Ember developers. It displays a sidebar panel in the Inspector which provides information about the Ember view backing the currently selected element in the DOM. It also assigns the view object to a global variable _V which can then be used within the console for further inspecting.
-
First, in Google Chrome, go to chrome://flags/ and enable Experimental Extension APIs. Relaunch your browser.
-
Look in the "Downloads" section of this repository for an @ember_inspector.crx@ file, and download it if present. You will be following the process explained in Google's documentation.
-
Open the "Extensions" window in Chrome (under the "Window" menu, select "Extensions".)
-
Drag the downloaded @ember_inspector.crx@ file into the "Extensions" window.
-
Approve the resulting alert.
If there is no @ember_inspector.crx@ package available, clone or export this repository and follow the instructions below:
- Open Tools-->Extensions (ensure Development mode is checked) and click on "Load unpacked extension..." to install the extension. You will need to reload Chrome once the extension is installed.
See Google's documentation for how to package your development version for upload.
- Customizable property watchlist
- Configurable global variable (change default _V to something else)
- Display clickable parentView and childViews
- Update manifest to work with Google manifest version 2.
- Display the first ancestor backed by an Ember view if the selected element does not have one.
- When displaying an ancestor, the attribute "distance" shows the number of DOM levels it is away from the selected element.