Inspecting layout XML and UI components with Bricklayer layout-inspect and ui-component-inspect

Just enough inspection to know what a page or an admin grid really contains before You change it.

Layout XML is the classic Magento puzzle. The catalog_product_view page is assembled from dozens of XML files: core modules, third-party extensions, the parent theme, Your theme. Somebody did a move, somebody else a remove, a template got overridden two themes up. Reading the files one by one, You (or Your agent) will miss at least one of those.

Admin UI components are the same story. customer_listing in core is not what Your admin shows if three extensions added columns to it.

Bricklayer resolves both at runtime, merged across all modules and the active theme, and shows the result.

layout-inspect

Parameter Default Description
handle "" layout handle to resolve; omit to list all registered handles
area frontend frontend, adminhtml
verbosity standard minimal, standard, detailed

For a handle, it returns:

  • the merged block/container tree
  • applied referenceBlock, referenceContainer, move and remove directives
  • declared .phtml template paths and the paths the theme actually resolves them to
  • the page layout

Not sure about the handle name? Omit it and get the list from the live install:

layout-inspect area="frontend"

Then resolve the one You need:

layout-inspect handle="catalog_product_view" verbosity="detailed"

The declared vs resolved template path is the part I find most useful. It answers “which .phtml do I actually edit” without digging through theme fallback by hand.

ui-component-inspect

Parameter Default Description
name required UI component name, e.g. customer_listing
verbosity standard minimal, standard, detailed

It returns the merged component tree, the data source, columns or fieldsets, and child components:

ui-component-inspect name="customer_listing"
ui-component-inspect name="product_form" verbosity="minimal"

Workflow

  1. Inspect first: layout-inspect or ui-component-inspect for the thing You want to change
  2. Follow the _skill_hint: development-context category=frontend for layouts, category=ui-component for grids and forms
  3. Write Your layout XML or UI component XML against what is really there, not what core ships
  4. Flush cache and inspect again to confirm Your change landed in the merged result
  • Start with verbosity="minimal" on big pages, go detailed only for the part You need
  • Both tools are read-only

Start coding!

Source: GitHub · Introspection tools wiki