Ash can now be 'inspected' just like a webpage, using DevTools. This is accomplished by re-using the existing frontend DevTools inspector and creating a backend in Ash which interacts using the DevTools protocol language.
The design doc for this can be found here
An example of what the hierarchy looks like:
And, here is a slideshow containing numerous GIFs showing what this is like to use.
- View the window/widget/view hierarchy (as seen above)
- Selecting nodes in the inspector displays their attributes (height, width, x, y) in the CSS side panel
- Attributes can be edited right from the CSS side panel.
- Any changes in the tree (addition/removal/rearranging of elements) in Ash will be reflected in the inspector
- Hovering over elements in the inspector highlights them in Ash
- Any animations initiated in Ash are displayed in the inspector under the "Animations" tab and can be replayed
- Hovering over elements in Ash highlights and expands them in the inspector
- Run Chromium with the UI DevTools flag:
$ chrome.exe --enable-ui-devtools=<port>
- In your Chrome browser on Ash, visit
inspect Ash in the listing. This will open up the inspector in a new tab.
If you wish to debug remotely, simply open chrome-devtools://devtools/bundled/inspector.html?ws=localhost:<port>/0 in your Chrome browser (the 0 stands for the first inspect-able component which is Ash, for now).