Debugging ui components

Question

I'm trying to build a CRUD module that uses UI components for admin grid and form.
I've did this before and worked, but this one is a bit different and apparently I screwed something up.
The problem is in the UI component file or some class referenced by the UI component file for sure. If I remove the UI component reference from the layout file, the page loads (without the grid obviously).
When including the UI component the page is blank and there is no error logged anywhere, even when on developer mode.

How/where can I start debugging the loading and rendering of the UI components?

• Bhupendra Jadeja: I had the same problem before few day ago. It was due to wrong folder structure of ui_component folder. Then there was issue in di.xml
• Marius: For the moment I don't care about my error. I care about how I can debug this since it might happen in the future.
• Bhupendra Jadeja: it is very tedious task to debugging the XML. Everytime i got error in report and system.xml. Hope we get answer from core team.
• Bhupendra Jadeja: did you get any way to debugging XML ?
• Marius: I found a point in the application where I can start, but I'm not sure yet that is't the best point to do it. I will post an answer today or tomorrow if I find something solid.

Answer 1

What I found so far is that when rendering the layout this stack is followed.

• \Magento\Framework\View\Layout::generateElements
• \Magento\Framework\View\Layout\GeneratorPool::process

Now, depending on the type of the layout a different layout generator is called in

foreach ($this->generators as $generator) {
 $generator->process($readerContext, $generatorContext);
}

For the Ui components ... continuing the stack:

• \Magento\Framework\View\Layout\Generator\UiComponent::process()
• \Magento\Framework\View\Layout\Generator\UiComponent::generateComponent()
• \Magento\Framework\View\Element\UiComponentFactory::create()
• \Magento\Ui\Model\Manager::prepareData()
• \Magento\Ui\Model\Manager::evaluateComponents()
• Magento\Framework\Data\Argument\InterpreterInterface::evaluate.

Here again it depends on the argument type that needs to be interpreted.
You can find some interpreters here lib/internal/Magento/Framework/Data/Argument/Interpreter/

This is as far as I got.
I know it's not a full explanation, but these are some points where you can identify if something is wrong with your ui component.

Answer 2

Try:

Source/vendor/magento/module-ui/Component/Wrapper/UiComponent.php

method: protected function _toHtml()

approximately starting in line 57

Debug $result and it should contain all the components that are loaded.

Answer 3

The only way I have been able to debug ui components is just to remove everything from the component xml and add in items one at a time making sure that the attributes are supported in the xsd.

• Marius: the file is valid against the xsd file. And I'm sure there is an other way other than removing bits of the file. There has to be a place where the file is loaded and processed.

Answer 4

You can start with using css for starting debugging you can use theme.less file under app/design/frontend/Mgs/molly/web/css e.g. change base color which is @base-color : @7c7bad

after changing any code you have delete var directory, you have clear content under frontend directory of pub/static/frontend/

At last hit command in cmd php bin/magento setup:static-content:deploy

• Marius: What does css have to do with debugging ui components?
• vnnogile_user: You can change layout or color of it. @Marius
• Marius: This has nothing to do with the question. I didn't ask about changing colors.
• dotancohen: This is a useful answer. Often while debugging I'll change the colour of an element to make it stand out or to see that it actually is being output.

Answer 5

I would start with:

Magento\Ui\TemplateEngine\Xhtml\Result->__toString( )

This is the place where Ui XML is pulled together. So this should be a starting point for Ui XML debug.