Easy-To-Use Bookmarklet to Toogle CSS Layout Hints On/Off

bookmarklet-css-layout-hints.js

/* Easy-To-Use Bookmarklet to Toogle CSS Layout Hints On/Off
 * Thanks to: https://dev.to/gajus/my-favorite-css-hack-32g3 and https://gist.github.com/vcastroi
 * Usage: create a new bookmarklet (inside your browser Bookmark Manager) and use the folowing code as the bookmark URL:
 */
javascript: (function () {
  const DEPTH = 10, els = document.body.getElementsByTagName('*'), items = [];
  let selector = '', style = '*{color:#000!important;outline:1px solid #f00!important;outline-offset:-2px;background-color:#fff!important;}\n';
  for (let el of els) el.innerHTML.indexOf(style) !== -1 && items.push(el);
  if (items.length > 0) items.forEach(item => item.innerHTML = '');
  else {
    style = '<style>' + style;
    for (let i = 0; i < DEPTH; i++) {
      selector += '*';
      style += selector + '{background-color:#ff01!important}\n';
    }
    style += '</style>';
    document.body.innerHTML += style;
  }
})();

// Or if you prefer a minified version for the bookmark URL:
javascript: (function(){const DEPTH=10,els=document.body.getElementsByTagName('*'),items=[];let selector='',style='*{color:#000!important;outline:1px solid #f00!important;outline-offset:-2px;background-color:#fff!important;}\n';for(let el of els)el.innerHTML.indexOf(style)!==-1&&items.push(el);if(items.length>0)items.forEach(item=>item.innerHTML='');else{style='<style>'+style;for(let i=0;i<DEPTH;i++){selector+='*';style+=selector+'{background-color:#ff01!important}\n'};style+='</style>';document.body.innerHTML+=style}})()