search

GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.49k stars 290 forks source link

leverage devtools overlays and selection #249

Open argyleink opened 5 years ago

argyleink commented 5 years ago

https://developer.chrome.com/extensions/debugger

this would break visbug from working as a webcomponent, BUT, it would solve a couple little bugs with direct selection, as well as increase the illusion that chrome and visbug are teamplayers. i'm still trying to deduce the ROI from a feature like this. do you have thoughts?

paulirish commented 5 years ago

So chrome.debugger just provides the raw devtools protocol. (Which is what devtools frontend, lighthouse, puppeteer all use for their interaction with the browser)

And then the Overlay domain has a bunch of methods which let you use the overlay that you'll see during Inspect Element, etc. You can very easily highlight all elements matching a selector. Or you can just draw highlight boxes/shapes wherever you want.

The overlays aren't in the DOM so you don't need to worry about stacking conflicts, etc. And you can also add borders, rulers, etc that probably would be a lot more painful in the DOM. But then again, means a dependency on the protocol. (And it adds a infobar to the top (you'll see it when you use the LH chrome extension)).

Outside of overlay, the rest of the devtools backend is available. CSS Code coverage, style tree data, DOM regardless of iframes/shadowdom, basically everything in the world is yours.