the Chromium logo

The Chromium Projects

Inspecting Chrome Native UI with Chrome UI DevTools

Aura/Views UI can now be 'inspected' just like a webpage inspect-able using Chrome DevTools. This is accomplished by re-using the existing frontend DevTools inspector and creating a backend in Chrome and Components which interact with DevTools inspector using the DevTools protocol language. We name this tool Chrome UI Devtools. The design document for this tool can be found here.

And, here is a slideshow containing numerous GIFs showing what this is like to use.

Distances between a pinned element (in solid blue border) and a hovered element (in solid green border). Guide lines are displayed along the pinned element (could be either window,widget, or view):

Picture 1: Distances between a pinned element and a hovered element.

UI Element hierarchy tree:

Picture 2: UI Element hierachy tree.

Current Features

Planned Features

Instructions

  1. Run Chromium with default port 9223 using one of these 2 ways:
    • Start with UI DevTools flag:
      • On Windows : $ chrome.exe --enable-ui-devtools
      • On ChromeOS, Linux: $ ./chrome --enable-ui-devtools
      • If you want to use different port, add port in the flag --enable-ui-devtools=<port>
    • Start Chrome without flag (./chrome or chrome.exe):
      • Go to Chrome Omnibox, type about:flags
      • Go to enable native UI inspection, click Enable and restart Chrome. This will start Chrome will listening port 9223.
  2. In your Chrome browser, go to Omnibox, either
    • Type **chrome://inspect#other** then click **inspect** under UiDevToolsClient in the listing. This will open up the inspector in a new tab (Picture 3).
    • Type direct link: devtools://devtools/bundled/devtools_app.html?uiDevTools=true&ws=localhost:9223/0

Picture 3: Open Chrome UI Inspection window

To remotely debug from different Chrome browser, navigate to devtools://devtools/bundled/devtools_app.html?uiDevTools=true&ws=<ip address>:<port>/0 (the 0 stands for the first inspect-able component which is in Aura/Views UI*,* for now).