$ show emberjs/ember-inspector
Ember Inspector is a browser extension (Chrome, Firefox, Opera, bookmarklet) that provides a rich debugging interface for Ember.js applications. It injects the `ember-debug` library into the target page, which collects runtime information about components, routes, data (Ember Data), promises, render performance, deprecations, and object internals. The inspector UI is an Ember.js application that communicates with the injected debug library via a message-passing port abstraction, using adapters specific to each browser environment. The codebase is a monorepo with four packages: `ember-debug` (injected debug library), `ember-inspector` (UI), and two test apps (classic and vite). It is actively maintained by the Ember core team, with CI/CD pipelines, extensive tests, and automated release planning. Architecture: The system is split into two halves. The `ember-debug` package uses a `Port` class for event-driven messaging and adapters (Chrome, Firefox, WebSocket, bookmarklet) to bridge the injected script to the extension's background page or devtools panel. The `ember-inspector` package is a full Ember app that renders tabs (Component Tree, Route Tree, Data, Promises, Deprecations, Render Performance, Info) and features an Object Inspector for drilling into property values and editing them. The UI uses a schema-based list rendering pattern, debounced search, and resizable/draggable columns. The object inspector handles both classic Ember objects and modern Glimmer components, including computed properties, tracked properties, getters, and services. Despite reliance on private Ember APIs and version-specific code paths, the codebase demonstrates strong engineering practices, with modular components that are potentially reusable (e.g., port messaging, adapter pattern, resizable columns, property display component).
The LLM identified 4 files worth highlighting for reuse:
Implements the Port class that provides event-driven message relay between the injected ember-debug library and the inspector UI. Uses `send`, `on`, and `one` methods with a `_listeners` registry. This is a clean, self-contained messaging pattern that could be extracted and reused in any application requiring cross-context or in-process communication.
Defines the BasicAdapter base class that all browser-specific adapters extend. It provides a standardized interface for message sending, resource opening, and inspector lifecycle (sendMessage, onMessageReceived, onInspectorOpened). Each adapter (Chrome, Firefox, WebSocket, Bookmarklet) implements the same contract, making the extension portable across environments. This pattern is directly reusable for any multi-platform extension or plugin system.
A generic resizable columns model that manages column widths, handles drag events, and computes proportional resizing. It exposes `onResize` and `onResizeEnd` events and is agnostic to the UI framework. The tests demonstrate deterministic column width calculations. Could be extracted as a standalone library for any table or list UI.
A self-contained Ember component for rendering and editing a single property of an inspected object. Supports various types (string, number, boolean, date, ember-object) and provides inline editing, send-to-console, and dependency key visualization. The component encapsulates display logic and user interaction patterns that are reusable for any object inspection tool, independent of the specific object model.