Magento 2 UI Inspector

Inspect Magento 2 uiRegistry components, relationships, and related DOM nodes.

Magento UI Inspector is a Chrome DevTools extension for developers working with Magento 2 UI Components. It adds a dedicated “Magento UI” panel to DevTools, giving you a practical way to inspect the live Magento UI registry on the current page. Instead of manually querying uiRegistry in the console, you can browse components visually, inspect their configuration, follow parent/child relationships, and understand how a component was initialized. Key features: - Browse the live Magento uiRegistry as a tree or graph - Search and filter components by name, index, or scope binding - Inspect component metadata such as RequireJS module, template, and element template - Open linked JavaScript and template sources from DevTools where available - View Knockout bindings and inspect the matching DOM element - Jump from the currently selected Elements node ($0) to its matching Magento UI component - Inspect observables, including Knockout observable values, observable arrays, ES5 tracked properties, and inherited observables - Edit scalar observable values directly from DevTools to test frontend behaviour - View component state resolution across defaults, layout, x-magento-init, and runtime values - Inspect imports, exports, links, and listens relationships - View provider relationships and jump to provider components - Inspect regions and child component placement - Review parsed x-magento-init configuration for the selected component - Capture and review Magento UI logging events when logging is enabled The extension is intended for Magento frontend debugging, especially on pages with complex UI Component trees such as checkout, customer account pages, product forms, admin grids, and custom storefront implementations.