Meu Hack CSS favorito

To sempre usando esse hack aqui pra ver as divs dos sites que vou construindo. Ele funciona como um bookmark toogle, algo que chamamos de Bookmarkleter.

Como fazer? primeiro, copie esse código aqui:

javascript: (function() {
  let domStyle = document.getElementById('domStylee');
  if (domStyle) {
    document.body.removeChild(domStyle);
    return;
  }
  domStyle = document.createElement("style");
  domStyle.setAttribute('id', 'domStylee');
  domStyle.append(
    ['* { 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; }'].join()
  );
  document.body.appendChild(domStyle);
})();

o que ele faz? ele injeta bordas e background nos elementos da tela. Vc pode alterar as cores se quiser. Fique a vontade.

Agora, vá até: https://chriszarate.github.io/bookmarkleter/

Na primeira caixinha de texto, dê um nome qualquer, e na segunda cole o código que você copiou acima!

Ta vendo ali o "Drag this link to your bookmarks bar" ??? Então, arraste o link para sua barra de tarefas e voalá! Um bookmark estará na sua barra de favoritos, e no site que você estiver, ao clicar no bookmark, o efeito será aplicado. se clicar de novo, será removido!

Enjoy !!!

Fonte: https://dev.to/gajus/my-favorite-css-hack-32g3 (na verdade lendo os comentários que se tem mais infos sobre o hack !! )