Magento 2 Knowledge Base Debugging Magento 2 UI Components

First Published: March 20, 2024

If you haven't planned your revenge on the creator of Magento 2's UI components, you're not a real Magento developer. In fact, I wouldn't be suprised if there was a module in an Adobe certification that included this. I've done it. You've done it. We have all done it. And for good reason. They are difficult to understand how parts fit together and really difficult to debug.

Fortunately, we've made it a little easier to see what data is being passed to your UI Components. It's something we built internally and have found it so useful when working with UI components in Magento 2 that we decided to bundle it in a small (and free) Magento 2 extension and release it into the wild.

Install via Composer

The easiest way to get the module is to install it via Composer:

# Require the module via Composer
composer require fishpig/magento2-ui-debug

# Enable the module in app/etc/config.php
bin/magento module:enable FishPig_UiDebug

# You may need to recompile, depending on your local config

Debug UI Component Config

Now that you have the module installed, you can simply add ?ui-debug to any URL in the Admin area and the UI component config data will be printed to the screen.

This should make it easier to see what data is being passed into the UI component. This is useful when trying to add your own data and figuring out what array path to use.