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 all desktop platforms including Linux, Windows, Mac, and ChromeOS.
There are two ways to enable UI DevTools:
-
Run Chromium with default port 9223 and start Chromium with UI DevTools command line flag:
$ out/Default/chrome --enable-ui-devtools
- If you want to use a different port, add the port number in the flag
--enable-ui-devtools=<port>.
- If you want to use a different port, add the port number in the flag
-
Enable
enable-ui-devtoolsfeature flag fromchrome://flags
Once enabled, go to chrome://inspect#native-ui and click the Inspect Native UI
button to launch the DevTools front-end in a separate tab.
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.
When an element is pinned, hovering over other elements will reveal the vertical and horizontal distance between the two elements.
To exit inspect mode, either click the inspect icon again or press the Esc key.
In the properties panel, each section has a source link in the upper right corner. When right-clicked, the context menu shows the option to "Open in new tab," which opens the class's header file in Chromium code search.
If the link is simply clicked, it will open the source code in the sources panel of UI DevTools, which is read in from local files.
In order to inspect a bubble, the command Ctrl+Shift+R (Meta+Shift+R for mac) locks bubbles to prevent them from dismissing upon losing focus. This allows a bubble's inner elements to be inspected. Bubble locking can be toggled off and on using the same command.
Note: Before hitting Ctrl+Shift+R (Meta+Shift+R for mac), the UI devtools window has to be the active window, otherwise it will cause a page refresh.
In the elements panel, Ctrl+F to open the search bar at the bottom. The search functionality allows developers to search the UI element tree quickly by name, tag <>, and style properties. The search can do substring matches or exact matches (specified with quotations). The search returns all matches and highlights the specific nodes on the tree that are matched. The up and down arrows on the right of the search bar or ENTER are used to traverse through the matches.
The search feature can also search the element's style properties in the UI element tree. The special key word 'style:' must be typed in the search bar.
