ember-inspector

Adds an Ember tab to the browser's Developer Tools that allows you to inspect Ember objects in your application.

View on GitHub Sponsor this project

969

Stars

292

Forks

Watchers

MIT

License

README

Read full README on GitHub →

Ember Inspector

Adds an Ember tab to the browser's Developer Tools that allows you to inspect Ember objects in your application.

Installation

Chrome

Install the extension from the Chrome Web Store.

OR:

Clone the repository
cd into the repo directory
run pnpm install
run pnpm build to build the dist directory
Visit chrome://extensions in Chrome
Make sure Developer mode is checked
Click on 'Load unpacked extension...'
Choose the dist/chrome folder in the cloned repo
Close and re-open developer tools if it's already open

Firefox

Install the Firefox addon.

OR:

Clone the repository
cd into the repo directory
run pnpm install
run pnpm build to build the dist directory
Visit about:debugging#/runtime/this-firefox in Firefox
Click on 'Load Temporary Add-on…'
Choose the dist/firefox/manifest.json file in the cloned repo

Opera

Clone the repository
cd into the repo directory
run pnpm install
run pnpm build to build the dist directory
Visit chrome://extensions in Opera
Make sure Developer mode is checked
Click on 'Load unpacked extension...'
Choose the dist/chrome folder in the cloned repo
Close and re-open developer tools if it's already open

Bookmarklet (All Browsers)

javascript: (function() { var s = document.createElement('script'); s.src = '//ember-extension.s3.amazonaws.com/dist_bookmarklet/load_inspector.js'; document.body.appendChild(s); }());

Internet explorer will open an iframe instead of a popup due to the lack of support for cross-origin messaging.

For development:

In a terminal:
- run pnpm serve:bookmarklet
In your browser:
- If Ember Inspector is installed as an active extension, deactivate it
- Visit the Ember app you want to inspect
- Open the developer tool console and execute the following (make sure you unblock the popup when you run the bookmarklet):

javascript: (function() { var s = document.createElement('script'); s.src = 'http://localhost:9191/bookmarklet/load_inspector.js'; document.body.appendChild(s); }());

Or to do this more easily in the future, create a new bookmark in your browser, and copy the above script as the URL.

The expected behavior is a new window opening with the URL http://localhost:9191/bookmarklet/<pane-root>/index.html?inspectedWindowURL=<inspected-app-url>, running your local ember-inspector. The content should be the same as the one you see when using the published extension, but not properly styled.

Vite Support

If your Ember app is running on Vite, you may need @embroider/legacy-inspector-support to get things working in your app.

Window Messages

The Ember Inspector uses window messages, so if you are using window messages in your application code, make sure you verify the sender and add checks to your event listener so as not to conflict with the inspector's messages.