Inspecting Ash with DevTools

[Sarmad]

Hello everyone!

I've been working on something special for the past 2+ months now and would like to share it with all of you now. To put it very briefly, you are now able to inspect Ash (or ChromeOS UI) with DevTools. 

Inspecting web pages in Chrome has been possible for a long time using the DevTools inspector. Now, with what I've been working on, you are able to inspect the ChromeOS UI using the same inspector. Not convinced? Here's an example of what the structure looks like:

Windows, widgets, views. You got it all in there. Here's the best part...this actually updates as the Ash window tree hierarchy changes. Here's a quick ~50 second GIF (might take a few seconds to load):

​

It only takes 3 steps to run this:

1. Run Chromium with the UI DevTools flag:
   $ chrome.exe --enable-ui-devtools=<port>
   
   
2. In your Chrome browser on Ash, visit chrome://inspect#other


3. Click 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.

Current features:

• View the window/widget/view hierarchy
• Selecting nodes in the inspector displays their attributes (height, width, x, y) in the CSS side panel
• Any changes in the tree (addition/removal/rearranging of elements) in Ash will be reflected in the inspector

Planned features:

• Any animations initiated in Ash are displayed in the inspector under the "Animations" tab and can be replayed
• Hovering over elements in the inspector highlights them in Ash, and vice-versa
• Much more!

All information above (and more) can be found here.

And of course, please do let me know if you have comments, suggestions, or any feedback at all.

Thank you,
Sarmad Hashmi

[PhistucK]

This is so cool (completely irrelevant to me, but still!)! :)

☆PhistucK

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-dev+unsubscribe@chromium.org.

[Sarmad Hashmi]

The images don't seem to show up. I've updated this page with them.

[aleve...@google.com]

Sarmad, I realize this is an old thread, but is it possible to still make this feature work?

I tried and was not able to get it working using any of the alternative means of launching it.

Cheers,

Aaron

[Sadrul Chowdhury]

This should still normally work. What platform are you trying on?

Note that for security concerns: we disable this on stable-channels.

Sadrul

--

--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-dev+unsubscribe@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/60005cb7-4df5-4167-b7cd-44800af69532%40chromium.org.

[Aaron Leventhal]

Hi Sadrul,

I tried on Linux first -- running with --enable-ui-devtools and then visiting chrome://inspect#other did not show a UIDevToolsClient in the listing. In addition, there was no "Enable Native UI Inspection" in about:flags.

Then I tried on Windows, and got further. The inspector opens up with a modal dialog that says "Debugging connection was closed. Reason: WebSocket disconnected. Reconnect when ready by reopening DevTools. [ Reconnect DevTools ]". Clicking the button just returns to the same dialog.

My colleague was able to get it working on Chrome OS, so I'll try that next.

Aaron

On Fri, Jan 26, 2018 at 1:13 PM Sadrul Chowdhury <sad...@chromium.org> wrote:

This should still normally work. What platform are you trying on?

Note that for security concerns: we disable this on stable-channels.

Sadrul

On Fri, Jan 26, 2018 at 12:43 PM, aleventhal via Chromium-dev <chromi...@chromium.org> wrote:

Sarmad, I realize this is an old thread, but is it possible to still make this feature work?

I tried and was not able to get it working using any of the alternative means of launching it.

Cheers,

Aaron

On Tuesday, November 29, 2016 at 3:57:41 PM UTC-5, Sarmad Hashmi wrote:

The images don't seem to show up. I've updated this page with them.

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-dev...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/60005cb7-4df5-4167-b7cd-44800af69532%40chromium.org.

--

--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/CAKgcGXizZZ5we3GSDgo-OJtf115FMh52MGSFkytXVyNqjAnX8w%40mail.gmail.com.