Ember Inspector
A browser extension that adds an Ember tab to Developer Tools for inspecting Ember objects in applications.
What is Ember Inspector?
Ember Inspector is a browser extension that adds a dedicated Ember tab to the browser's Developer Tools, allowing developers to inspect Ember objects, components, routes, and data models within their applications. It solves the problem of debugging complex Ember.js applications by providing a structured, real-time view into the application's internals.
Ember.js developers and teams building and maintaining Ember applications who need efficient debugging and inspection tools integrated into their browser's Developer Tools.
Developers choose Ember Inspector because it offers deep, framework-specific insights into Ember applications directly within the browser, eliminating the need for external debugging tools and streamlining the development workflow with real-time object inspection.
Overview
Adds an Ember tab to the browser's Developer Tools that allows you to inspect Ember objects in your application.
Use Cases
Best For
- Debugging Ember.js component hierarchies and state
- Inspecting Ember Data models and relationships
- Analyzing route transitions and controller data
- Real-time exploration of Ember objects during development
- Integrating Ember-specific tools into browser Developer Tools
- Using bookmarklets for Ember debugging in unsupported browsers
Not Ideal For
- Projects not built with the Ember.js framework
- Production environments where debugging tools are disabled or unnecessary
- Ember applications using Vite without the @embroider/legacy-inspector-support package
- Teams that haven't implemented proper window message verification to avoid conflicts with the inspector
Pros & Cons
Pros
Adds a dedicated Ember tab to Chrome, Firefox, and Opera Developer Tools, providing seamless debugging within the browser without external tools.
Enables real-time viewing and exploration of Ember objects, including components, models, and services, through a structured interface for deep insights.
Supports extensions for major browsers and offers a bookmarklet for all browsers, ensuring debugging capabilities even in unsupported environments.
Allows navigation of the component tree and inspection of active routes and controllers, crucial for understanding application flow and state.
Cons
Local development requires cloning the repository, installing global dependencies like ember-cli, and building the extension, which is more complex than standard store installation.
Ember apps running on Vite may need an additional package (@embroider/legacy-inspector-support) to function, adding extra setup steps and potential points of failure.
Relies on window messages that can interfere with application code if not properly secured, requiring developers to add verification checks to avoid breakages.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.