Chromium Developer Tools (v2017M1+) - what where how?



So in M1 we now have ‘Chromium Developer Tools’. Sounds useful so…

Where to find them? -> if your plugin uses the newly htmlDialogs you find them by right clicking and choosing ‘show dev tools’ or ‘inspect element’

How to use them? -> you can click/inspect elements and it shows the dimensions, styles, line in your code etc.

Maybe someone who already has used them can shed some more light onto this?


This something that is built-into Chrome, so the Chrome online documentation is the place to look. (Do not expect Trimble document this, as it should already be documented.)


In chrome I get this when I right click:

In SketchUp I get this:

Ctrl+Shift+I also does not reveal any developer tools. Is there perhaps a setting that needs to be enabled first?


Neil, the 2nd image looks like a UI::WebDialog using MSIE, not a UI::HtmlDialog using the CEF.

(This is SU2017M1 only for Windows, SU2017M0 for Mac.)


I see. I was using an outdated version of SU and didn’t even know it.


some HtmlDialogs can still have ‘context menu’ functionality disabled via javascript…

it’s best to test on one you make…



I just updated SU. I can now use the dev tools. Awesome.

I just tested one such Web app I have. The debugger can’t be opened even with shortcut keys.

If you open the dev tools first (by loading google for example), then change the url back to the ‘locked’ web app, you can debug. The dev tools are opened in a separate window but remain linked to the HtmlDialog they were opened from.