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?

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.

Answer 4

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.

Answer 5

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