Repository files navigation

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

Install the extension from theChrome Web Store.

OR:

• Clone the repository
• cd into the repo directory
• runpnpm add -g ember-cli
• runpnpm install
• runpnpm build to build thedist directory
• Visitchrome://extensions in Chrome
• Make sureDeveloper mode is checked
• Click on 'Load unpacked extension...'
• Choose thedist/chrome folder in the cloned repo
• Close and re-open developer tools if it's already open

Install theFirefox addon.

OR:

• Clone the repository
• cd into the repo directory
• runpnpm add -g ember-cli
• runpnpm install
• runpnpm build to build thedist directory
• Visitabout:debugging#/runtime/this-firefox in Firefox
• Click on 'Load Temporary Add-on…'
• Choose thedist/firefox/manifest.json file in the cloned repo

• Clone the repository
• cd into the repo directory
• runpnpm add -g ember-cli
• runpnpm install
• runpnpm build to build thedist directory
• Visitchrome://extensions in Opera
• Make sureDeveloper mode is checked
• Click on 'Load unpacked extension...'
• Choose thedist/chrome folder in the cloned repo
• Close and re-open developer tools if it's already open

#"auto">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:
runpnpm 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):
#"auto">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 URLhttp://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 youverify the sender and add checks to your event listener so as not to conflict with the inspector's messages.
Development
Want to work on inspector? SeeDEVELOPMENT.md

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks