Page Size Visualization Bookmarklet

Readme.md

Visualise the size of each element on the page - Bookmarklet

Read more

Original Blog Post about this topic

What it does

On click it toggles the visualize-style

USE IT

just use the javascript code and add it as a bookmark:

javascript: (function(){var e,t;if(window.addedChild){document.head.removeChild(window.addedChild);window.addedChild=false;return}e="* { background-color: rgba(255,0,0,.2); }"+"* * { background-color: rgba(0,255,0,.2); }"+"* * * { background-color: rgba(0,0,255,.2); }"+"* * * * { background-color: rgba(255,0,255,.2); }"+"* * * * * { background-color: rgba(0,255,255,.2); }"+"* * * * * * { background-color: rgba(255,255,0,.2); }";t=document.createElement("style");t.appendChild(document.createTextNode(e));document.head.appendChild(t);window.addedChild=t})()

VisualizePageSize.js

/**
 *  JavaScript Bookmarklet Source
 *  to
 *  'Visualise the size of each element on the page'
 *  found on http://gridsquare.io/post/86888026850/visualise-the-size-of-each-element-on-the-page
 * 
 *  quickly hacked by: @weiland
 **/
 
(function(){
  var css, style;
  if(window.addedChild) {
    document.head.removeChild(window.addedChild);
    window.addedChild = false;
    return;
  }
  css = '* { background-color: rgba(255,0,0,.2); }'+
  '* * { background-color: rgba(0,255,0,.2); }'+
  '* * * { background-color: rgba(0,0,255,.2); }'+
  '* * * * { background-color: rgba(255,0,255,.2); }'+
  '* * * * * { background-color: rgba(0,255,255,.2); }'+
  '* * * * * * { background-color: rgba(255,255,0,.2); }';
  style = document.createElement("style");
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);
  window.addedChild = style;
}());