Debug UI components & Knockout.js view models in Google Chrome

Debugging UI Components

Before diving deeper, it’s essential to know how to debug UI components and Knockout templates. As UI components are created, they are automatically added to the UI registry, a simple yet powerful module that you can use to retrieve any data you need from your UI components.

To access the UI registry, open the dev console and type require('uiRegistry'). This returns a “Registry” object, which allows you to retrieve your UI component data by chaining a call to .get(). Pass in a string with the name of the UI component you want to retrieve data for, and an object will be returned that contains all properties linked to this UI component. You can also grab these properties directly by chaining on a dot and the property name.

The get() function can also accept a function as a parameter. The first argument of this function will be the UI item, and you can iterate through all the items. For example, you can log every UI item’s name through the console. This can be very helpful if you are looking for a specific UI component and don’t know its name or want to debug specific information about that UI component.

Debugging Knockout Templates

To debug Knockout templates, first, reload the page and inspect an element, such as the logo. In the console, execute $0 to return the DOM element. You can use this feature in combination with a Knockout function to get the actual context of a specific Knockout template.

Scroll over to your custom template and expand the relevant divs. This is where Knockout is initialized with data-bind, binding the scope of your UI component to this DOM element. You can pass in this DOM element as a parameter to functions to start Knockout.js debugging.

In the console, with the DOM element selected, run require('ko').contextFor($0) to get the context for that DOM element. Expand the ko.bindingContext object to see the related $data property (if it has any data defined), any Knockout.js parent templates, or the root ko object containing all properties of Knockout. Similar to debugging UI components, you can chain on a specific property and return it.

This debugging process is extremely useful when working with UI components and Knockout templates, helping you identify issues and ensure the proper functioning of your web application.