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

• Display window/widget/view in UI Element hierarchy tree (picture 2).
• Selecting nodes in the inspector displays their attributes (height, width, x, y, visibility, view text tool tip if exist) in the CSS side panel (picture 2).
• Attributes (except tooltip) can be edited in the CSS side panel.
• Any changes in the UI such as addition/removal/rearranging of elements in Aura/Views UI will be reflected in the Chrome UI Inspector.
• Hovering over elements in the inspector highlights them in Aura/Views UI, displays guide lines around the elements and and expands them in the inspector.
• Entering inspect mode by clicking on the arrow-in-box and hovering on any window/widget/view will show the corresponding node in DOM tree and element guide lines.
• Entering inspect mode by clicking on the arrow-in-box and hovering on any DOM node will show the corresponding UI Element in Chrome UI and element guide lines.
• Entering inspect mode and clicking on any element will pin the element. While the element is being pinned, hovering on another element displays the distances between the pinned element and the hovered element (as in picture 1). There are 7 position arrangements between 2 elements as described in this design document.
• Pressing ESC or clicking on the arrow-in-box to exit inspect mode.
• Display hit test target window under mouse cursor in inspect mode. Steps are shown in this presentation slide.
• Support platforms: ChromeOS, Linux and Windows.

Planned Features

• Any animations initiated in in Aura/Views UI are displayed in the inspector under the "Animations" tab and can be replayed.

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).