Magento 2 debugging js ui component in browser

Question

As i am searching debugging of ui component i don't find any great articles to debugging ui component in browser console so here i am writing my question.

As we all know magento current system is using knockout js, so i found this link https://devdocs.magento.com/guides/v2.2/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.html but i don't understand how it is work.

As per magento officials doc we can debug data as below link content. https://devdocs.magento.com/guides/v2.2/ui_comp_guide/concepts/ui_comp_uiregistry.html

But as above link you have to know about your componentName for debugging it's data.

But my main concern is if i am currently accessing any custom module or core module form and I want to debug that form data from console then how ? because I don't know it's form namespace and it's tedious to find form namespace from element tab.

Answer 1

I made one solution after working on jquery function calling into console line by line.

As per debugging form data by uiRegistry https://devdocs.magento.com/guides/v2.2/ui_comp_guide/concepts/ui_comp_uiregistry.html.
We need componentName.

So for that I have created jQuery function.

Getting Grid Component

var gridComponentName = jQuery('div.admin__data-grid-outer-wrap:last').data('bind').split(': ',2)[1].replace(/'/g,'');

Getting Form Component

var formComponentname = jQuery('div.admin__form-loading-mask').data('component');

After getting main componentName you can pass it into registry

var registry = require('uiRegistry');
var component = registry.get(componentName);
console.log(component.namespace);

You can debug from this. Hope this will be helpful!.

Answer 2

Few steps that i can recommend to debug UI component are:

1. Check your browser console for any js error message.
2. Open your console and open network tab and check your relevant ui component call is executing successfully or not. Check if it's response contains any error message.
3. Check your var/log folder for any error message.
4. If you make any changes to your xml ui component clear the cache and check the changes usign the command bin/magento cache:clean

Answer 3

I'd also recommend to display ALL logs from layout.js on your browser console.

To do this, in the file src/vendor/magento/module-ui/view/base/web/js/core/renderer/layout.js, add this line after the 'use strict'; line.

consoleLogger.setDisplayLevel(consoleLogger.levels.ALL);

This would look like:

], function (_, $, utils, registry, types, consoleLogger) {
    'use strict';

    consoleLogger.setDisplayLevel(consoleLogger.levels.ALL);

    var templates = registry.create(),
        layout = {},
        cachedConfig = {};

This will print on the console all steps of initialization for each uiComponents on the page.

Very helpful to know what's going on behind the scene.