UI DevTools allows UI developers to inspect the Chrome desktop UI system like a webpage using the frontend DevTools Inspector. It is currently supported on Linux, Windows, Mac, and ChromeOS.
Run Chromium with default port 9223 and start Chromium with UI DevTools flag:
$ out/Default/chrome --enable-ui-devtools
In the Chrome Omnibox, go to chrome://inspect#other and click
inspect under UIDevToolsClient.
View, Window, and Widget elements are displayed in the hierarchal elements tree. To expand the elements tree, right click the root element and then select Expand Recursively from the context menu. Then, to inspect an element's properties, click on its elements node.
When an element in the elements tree is selected, the property panel on the right side displays the element's properties. All elements have the basic properties (height, width, x, y, visibility). For Window and View elements, if that element has Layer properties, they will be displayed in a separate section.
For View elements with Metadata properties, each parent class's properties from the Metadata will be displayed in an additional section.
Elements' basic properties can be modified from the properties panel and changes will be shown.
To enter inspect mode, click the inspect icon at top left corner of UI Devtools.
Hovering over a UI element highlights that element with a blue rectangular border and reveals the element's node in the elements tree.
Clicking on a highlighted element will pin that element. Clicking the corresponding node in the elements tree will reveal that element's properties.