Magento 2 UI Inspector

Tracking since May 18, 2026.

Changelog

• May 24, 2026
  description

  Magento UI Inspector adds a Chrome DevTools panel for inspecting Magento 2 UI components on the current page, including uiRegistry hierarchy, bindings, observables,
    state, links, templates, providers, initialization config, and Magento UI logging.

  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.

Permissions & access

Permissions

None declared

Host access

None declared

Screenshots