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.42k stars 285 forks source link

New plugin: Body overflow element highlighter / debugger #500

Open argyleink opened 3 years ago

argyleink commented 3 years ago

here's a script starter https://davidwalsh.name/detect-overflow-elements

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
      console.log('Found the worst element ever: ', el);
  }
});

Seems like a nice plugin to be able to run 👍🏻

hchiam commented 3 years ago

i'll take a look into this. i'll refer to some old code of mine: https://github.com/hchiam/in-browser-style-linter/blob/master/linter.js#L163