Feature request: programmatic box-model highlighting

[Daniel Vaughn]

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

document.querySelector('#target').debug()

// or this

document.debugElement = document.querySelector('#target')

// or this

# target {

  -webkit-debug: visible;

}

[Yang Guo]

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?

Cheers,

Yang

--
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]

The 'web developer' extension had this feature long ago for firefox. Turns out, the extension is 1) still maintained and 2) supported for chrome.

Try out https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm/

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

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CAFSTc_hczONb%3DPwJQZt_XN39DBmhTsLwoxwZb_-eABAMOTVOwg%40mail.gmail.com.