Skip to content

Instantly share code, notes, and snippets.

@tiagosampaio
Created May 21, 2024 18:03
Show Gist options
  • Save tiagosampaio/586ed100f75960ab479492480ef5a07e to your computer and use it in GitHub Desktop.
Save tiagosampaio/586ed100f75960ab479492480ef5a07e to your computer and use it in GitHub Desktop.
Magento 2: UI Components Debug Reference Sheet

Magento 2: UI Components Debug Reference Sheet

Here are some examples of how to debug UI Components in Magento 2.

Get all UI Components registered on the page

require('uiRegistry').get(ui => console.log(ui.name));

Inspect a single given component

require('uiRegistry').get('checkout.sidebar.guarantee');

Query by a specific property

require('uiRegistry').get('parentName = checkout.sidebar');

Search by multiple props, returns first matching instance

require('uiRegistry').get('parentName = checkout.sidebar, index = guarantee');

Use conditional logic to return more than one match

require('uiRegistry').get(
  ui => ui.parantName == 'checkout.sidebar' && console.log(ui.name)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment