css-layout-hack.js

// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
			items.push(elements[i]);
		}
	}
	if (items.length > 0) {
		for (var i = 0; i < items.length; i++) {
			items[i].innerHTML = '';
		}
	} else {
		document.body.innerHTML +=
			'<style>* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
            * * { background-color: rgba(0,255,0,.2) !important; }\
            * * * { background-color: rgba(0,0,255,.2) !important; }\
            * * * * { background-color: rgba(255,0,255,.2) !important; }\
            * * * * * { background-color: rgba(0,255,255,.2) !important; }\
            * * * * * * { background-color: rgba(255,255,0,.2) !important; }\
            * * * * * * * { background-color: rgba(255,0,0,.2) !important; }\
            * * * * * * * * { background-color: rgba(0,255,0,.2) !important; }\
            * * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }</style>';
	}
})();

// ---------------------------------------------------------
// another bookmarklet to display the elements Id on screen, some of them do display themselves on top of others

javascript: (function () {
  var styleEl = document.getElementById("css-id-labels-hack");
  if (styleEl) {
    styleEl.remove();
    const elems = document.querySelectorAll(".css-idlabel-dbg");
    [...elems].forEach((elem) => {
      elem.remove();
    });
    return;
  }

  styleEl = document.createElement("style");
  styleEl.id = "css-id-labels-hack";
  styleEl.innerHTML =
    "div.css-idlabel-dbg{   text-shadow: 3px 3px 4px white; position: fixed;    background-color: rgba(0,255,0,0.4) !important;    outline: 0px !important;    color: rgb(0, 0, 0) !important;    padding: 2px !important;} ";
  document.body.append(styleEl);
  
  const elems = document.querySelectorAll("[id]");
  [...elems].forEach((elem) => {
    const divroot = document.createElement("div");
    divroot.setAttribute("class", "css-idlabel-dbg");
    divroot.textContent = "#" + elem.id;
    elem.insertAdjacentElement("afterbegin", divroot);
  });

})();

Great! Thank you both!

extra tip

You can, in Mozilla Firefox, add a keyword while adding a bookmark, for example add keyword check, and you will be able, just typing the check in the URL and hitting the enter, to see the results.

Thank You! It works on most of the sites, except Github. Strange.

I think that's because it is a gist.

Thanks for this... it is very handy!!

I wanted to change the colors around and ended up having to change the code in 2 places cause sometimes the string check didn't work anymore... so I simplified the code a bit. I only tested in Chrome, so maybe there is a good reason why you did it your way, but for what it is worth here is my amended solution:

javascript: (function() {
  const element = document.querySelector('#test-layout-styles');
  if (element) {
    document.head.removeChild(element);
  } else {
    const style = document.createElement('style');
    style.id = 'test-layout-styles';
    style.innerHTML = `
          * { background-color: rgba(255,0,0,.2); }
          * * { background-color: rgba(255,0,255,.2); }
          * * * { background-color: rgba(0,255,255,.2); }
          * * * * { background-color: rgba(255,255,0,.2); }
          * * * * * { background-color: rgba(0,255,0,.2); }
          * * * * * * { background-color: rgba(0,0,255,.2); }
          * * * * * * * { background-color: rgba(255,0,0,.2); }
          * * * * * * * * { background-color: rgba(255,255,0,.2); }
          * * * * * * * * * { background-color: rgba(0,255,255,.2); }
    `;
    document.head.appendChild(style);
  }
})();

If you wanted to make it shorter (and dont mind using a single color) you could fill the array n number of times, that way you don't have to do each line of css manually

javascript: (function() {
  const element = document.querySelector('#test-layout-styles');
  const cssString = '* { background-color: rgba(0,255,255,.2);!important}';
  if (element) {
    document.head.removeChild(element);
  } else {
    const style = document.createElement('style');
    style.id = 'test-layout-styles';
    style.innerHTML = Array(20).fill().map((i,k) => '* '.repeat(k) + cssString).join(';\r\n');
    document.head.appendChild(style);
  }
})();

Nice tricks 🎉,It's same as this extension https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh

Nice tricks 🎉,It's same as this extension https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh

Thats really great....

Now I _dont have to write_ this every time in my stylesheet.

Just copy the code into this tool and your bookmarklet is ready for use: https://chriszarate.github.io/bookmarkleter/

javascript: (function() {
  const element = document.querySelector('#test-layout-styles');
  const bg = (c) => `{background-color: rgba(${c==1||c==3||c==5?255:0},${c==2||c==3||c==6?255:0},${c==4||c==5||c==6?255:0},.2) !important;}`;
  if (element) {
    document.head.removeChild(element);
  } else {
    const style = document.createElement('style');
    style.id = 'test-layout-styles';
    style.innerHTML = Array(40).fill().map((i, k) => '* '.repeat(k+1) + bg((k%6)+1)).join('\r\n');
    document.head.appendChild(style);
  }
})();

Why there construction javascript: ? what does it do and what is it called?

@iliyaZelenko Bookmarklet

https://en.m.wikipedia.org/wiki/Bookmarklet

thanks

made a small change to add a div that displays the Id of the elements on the page, was helpful on a recent site I had to debug, so I'll save it here

looks like this ^ some labels are still had to read, maybe this will be on its own separate Bookmarklet later

javascript: (function () {
  var styleEl = document.getElementById("css-layout-hack");
  if (styleEl) {
    styleEl.remove();
    const elems = document.querySelectorAll(".css-name-dbg");
    [...elems].forEach((elem) => {
      elem.remove();
    });
    return;
  }
  styleEl = document.createElement("style");
  styleEl.id = "css-layout-hack";
  styleEl.innerHTML =
    "div.css-name-dbg{   text-shadow: 3px 3px 4px white; position: fixed;    background-color: rgba(255, 255, 255, 0) !important;    outline: 0px !important;    color: rgb(0, 0, 0) !important;    padding: 2px !important;} * { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }    * * { background-color: rgba(0,255,0,.2) !important; }    * * * { background-color: rgba(0,0,255,.2) !important; }    * * * * { background-color: rgba(255,0,255,.2) !important; }    * * * * * { background-color: rgba(0,255,255,.2) !important; }    * * * * * * { background-color: rgba(255,255,0,.2) !important; }    * * * * * * * { background-color: rgba(255,0,0,.2) !important; }    * * * * * * * * { background-color: rgba(0,255,0,.2) !important; }    * * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }";
  document.body.append(styleEl);
  const elems = document.querySelectorAll("[id]");
  [...elems].forEach((elem) => {
    const divroot = document.createElement("div");
    divroot.setAttribute("class", "css-name-dbg");
    divroot.textContent = "#" + elem.id;
    elem.insertAdjacentElement("afterbegin", divroot);
  });
})();

I've added the id as a separate bookmarket, not sure if I can add an onclick copy-to-clipboard function to the label, maybe I'll try that latter