To help develop and debug Chromium desktop UI, this doc shares a set of developer tools and their usages.
After enablingui-debug-tools flag fromchrome://flags, developers will be able to use the following keyboard shortcuts:
| Actions | Shortcuts |
|---|---|
| Ctrl+Alt+Shift+T | Toggle between non-Tablet mode and Tablet mode |
| Ctrl+Alt+Shift+V | Print out the current Views tree hierarchy |
| Ctrl+Alt+Shift+M | Print out all the views on the Views tree with their properties in details |
UI DevTools is a set of graphical inspection and debugging tools for Chromium native UI. They largely resemble the Web DevTools used by Web developers. There are two ways to enable the tools:
ui-debug-tools flag fromchrome://flags--enable-ui-devtools command line flagOnce being enabled, UI DevTools can be launched through a button onchrome://inspect#native-ui page. Thus, UI developers are able to examine the UI structure, individual view's layout and properties etc.
Detailed usage information and feature tutorials can be found in thisdoc.
For developers who prefer to use debuggers, some debugger extensions or scripts can be helpful. Once being loaded into the debugger, they would provide custom commands such as printing out a view's properties or the view hierarchy information.
| Target Debugger | Extension/Script Usage | Code Location |
|---|---|---|
| Windbg | README | Source |
| LLDB | TBA | TBA |
Ever wonder what common controls the Views framework provides? And how to customize them?
views_examples andviews_examples_with_content are two programs that list those controls and show examples on how to use them. Just build and run the following commands:
$ autoninja-Cout/Default views_examples$out/Default/views_examples[--enable-examples=<example1,[example2...]>]
The list of all available examples can be found inREADME.
To be able to inspect the properties of a view through those tools, the corresponding view needs to have metadata and properties built in it. This requires adding some standard macros. A simple example can be found from thiscomment.
More advanced usages of the macros and special property handlings are elaborated in thisdoc.