Magento 2 uiRegistry

In Magento 2, the UI components built with Knockout are then composed hierarchically. Their names are derived from a concatenation with their parent names. Looking at the merged checkout_index_index.xml, we can see that the checkout component contains many nested configuration fields.

While developing new features for Magento 2, sometimes (typically, for debugging purposes), we need to know which Knockout JS components are used on a current page or to access a specific component by name.

Luckily, there’s a simple way: you can get a list of all the knockout components on the current page using uiRegistry. All you need to do is just enter the following code in the browser's console:

requirejs('uiRegistry').get(function(item)

????console.log(item.name);

});


{        

And if we want to retrieve a specific object and know the full concatenated name of the element, we can then simply execute something like the following:

requirejs('uiRegistry').get(‘checkout.steps.billing-step.payment.renders’)        

If you want to get the full information about uiRegistry, please follow this guide.