Feature request: programmatic box-model highlighting

Skip to first unread message

Daniel Vaughn

Jul 10, 2022, 7:34:07 AM7/10/22
to Chrome DevTools
Apologies beforehand if this should be (or has been) submitted elsewhere.

Developers often use somewhat hacky CSS to visually highlight elements, mostly through borders and outlines. The devtools have translucent box model overlays, but you have to hover in the elements panel to trigger them, limiting their usefulness. It would be great if we could trigger these overlays programmatically.

I know that all or most of the devtools functionality is scoped to the extensions API, but this seems fairly benign, and would be such a useful feature for day-to-day development.

// something like this

// or this
document.debugElement = document.querySelector('#target')

// or this
# target {
  -webkit-debug: visible;

Yang Guo

Jul 11, 2022, 2:26:45 AM7/11/22
to google-chrome-...@googlegroups.com
Thanks for submitting this suggestion. However, I have the feeling that this can be done in userspace code. Is there any advantage in having DevTools directly supporting it?



You received this message because you are subscribed to the Google Groups "Chrome DevTools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/166fd6d4-b5f6-4191-a9e2-6c2180c3f8a7n%40googlegroups.com.

Paul Irish

Jul 12, 2022, 10:00:12 PM7/12/22
to google-chrome-...@googlegroups.com
The 'web developer' extension had this feature long ago for firefox. Turns out, the extension is 1) still maintained and 2) supported for chrome.

And look at "Information > Display Topographic Information"   and also "Outline > Outline * Elements" 


Reply all
Reply to author
0 new messages