UI DevTools Overview

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.

• Old Ash Doc
• Backend Source Code
• Inspector Frontend Source Code

How to run

1. Run Chromium with default port 9223 and start Chromium with UI DevTools flag:

    $ out/Default/chrome --enable-ui-devtools
   

   • If you want to use different port, add port in the flag --enable-ui-devtools=<port>.

2. In the Chrome Omnibox, go to chrome://inspect#other and click inspect under UIDevToolsClient.

   • Direct link is chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9223/0.

How to Use

Elements Tree

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.

Views Property Inspection

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.

Inspect Mode

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.

Sources Panel

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.

View Bounds Highlighting

Red border rectangles around each View element can be drawn using the command Ctrl+R (Meta+R for mac). The rectangles can be toggled off and on using the same command.

Bubble Locking

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.

UI Element Tree Search

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.