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.

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.

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.

expand elements

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.

browser frame properties

For View elements with Metadata properties, each parent class's properties from the Metadata will be displayed in an additional section.

image view properties

Elements' basic properties can be modified from the properties panel and changes will be shown.

edit property

Inspect Mode

To enter inspect mode, click the inspect icon at top left corner of UI Devtools.

inspector button

Hovering over a UI element highlights that element with a blue rectangular border and reveals the element's node in the elements tree.

hovering over elements

Clicking on a highlighted element will pin that element. Clicking the corresponding node in the elements tree will reveal that element's properties.