Skip to content

Instantly share code, notes, and snippets.

@weiland
Last active August 29, 2015 14:02
Show Gist options
  • Save weiland/11b8749bdfbcd23a1d9e to your computer and use it in GitHub Desktop.
Save weiland/11b8749bdfbcd23a1d9e to your computer and use it in GitHub Desktop.
Page Size Visualization Bookmarklet

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})()
/**
* 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;
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment