Bookmarklet based on http://mathiasbynens.be/demo/css-hidden-elements

bookmarklet.js

javascript:(function()%7Bvar%20s=document.createElement(%22div%22);s.style.display=%22none%22;s.innerHTML=%22%3Cstyle%20type='text/css'%3Ehead,%20title,%20link%5Bhref%5D%5Brel%5D,%20title,%20meta,%20style,%20script%20%7Bdisplay:%20block;max-width:1000px;margin:1em%20auto;text-align:left;%7D%20link%5Bhref%5D%5Brel%5D::after%20%7Bcontent:%20attr(rel);%20text-transform:%20capitalize;%20%7D%20meta%5Bcharset%5D::after%20%7Bcontent:%20'Charset:%20'%20attr(charset);%20%7D%20meta%5Bname%5D%5Bcontent%5D::after%20%7Bcontent:%20attr(name)%20':%20'%20attr(content);%20text-transform:%20capitalize;%20%7D%20/*%20That%E2%80%99s%20it%20really.%20The%20following%20is%20just%20to%20add%20some%20style:%20*/%20head%20%7Bmargin:%2020px%20auto;%20width:%20960px;%20font:%2014px/1.5%20Arial,%20sans-serif;%20%7D%20title%20%7Bfont-size:%2026px;%20font-weight:%20bold;%20%7D%20link%5Bhref%5D%5Brel%5D%20%7Bfloat:%20left;%20cursor:%20pointer;%20padding:%200%2010px;%20margin-bottom:%2010px;%20height:%2030px;%20line-height:%2029px;%20text-decoration:%20none;%20color:%20%23d3d3d3;%20background:%20%23333;%20margin-right:%205px;%20-moz-border-radius:%204px;%20-webkit-border-radius:%204px;%20border-radius:%204px;%20-moz-box-shadow:%200%201px%203px%20rgba(0,%200,%200,%20.5);%20-webkit-box-shadow:%200%201px%203px%20rgba(0,%200,%200,%20.5);%20text-shadow:%200%20-1px%201px%20rgba(0,%200,%200,%20.25);%20border-bottom:%201px%20solid%20rgba(0,%200,%200,%20.25);%20%7D%20link%5Bhref%5D%5Brel%5D:hover,%20link%5Bhref%5D%5Brel%5D:focus%20%7Bbackground:%20%23666;%20color:%20%23fff;%20%7D%20script:not(%5Bsrc%5D),%20style%20%7Bclear:%20both;%20margin:%201em%20auto;%20padding:%205px;%20border:%201px%20solid%20%23666;%20background:%20%23ddd;%20font-family:%20Monaco,%20'Lucida%20Console',%20'Courier%20New',%20monospace;%20white-space:%20pre;%20%7D%20script%5Bsrc%5D:after%20%7Bcontent:%20':%20External%20file:%20'%20attr(src);%20%7D%20script:before,%20style:before%20%7Bcontent:%20'JS';%20font-size:%202em;%20font-weight:%20bold;%20font-family:%20Arial,%20sans-serif;%20%7D%20style:focus%20%7Bbackground:%20%23eee;%20%7D%20style:before%20%7Bcontent:%20'CSS'%7D%20%23injectstyles1%20%7B%20display:none;%20%7D%3C/style%3E%22;document.body.appendChild(s);%7D)();

src.js

var s = document.createElement("div"); s.style.display="none"; s.innerHTML = "<style type='text/css'>head, title, link[href][rel], title, meta, style, script {display: block;max-width:1000px;margin:1em auto;text-align:left;} link[href][rel]::after {content: attr(rel); text-transform: capitalize; } meta[charset]::after {content: 'Charset: ' attr(charset); } meta[name][content]::after {content: attr(name) ': ' attr(content); text-transform: capitalize; } /* That’s it really. The following is just to add some style: */ head {margin: 20px auto; width: 960px; font: 14px/1.5 Arial, sans-serif; } title {font-size: 26px; font-weight: bold; } link[href][rel] {float: left; cursor: pointer; padding: 0 10px; margin-bottom: 10px; height: 30px; line-height: 29px; text-decoration: none; color: #d3d3d3; background: #333; margin-right: 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .5); text-shadow: 0 -1px 1px rgba(0, 0, 0, .25); border-bottom: 1px solid rgba(0, 0, 0, .25); } link[href][rel]:hover, link[href][rel]:focus {background: #666; color: #fff; } script:not([src]), style {clear: both; margin: 1em auto; padding: 5px; border: 1px solid #666; background: #ddd; font-family: Monaco, 'Lucida Console', 'Courier New', monospace; white-space: pre; } script[src]:after {content: ': External file: ' attr(src); } script:before, style:before {content: 'JS'; font-size: 2em; font-weight: bold; font-family: Arial, sans-serif; } style:focus {background: #eee; } style:before {content: 'CSS'} #injectstyles1 { display:none; }</style>"; document.body.appendChild(s);

styles.css

 head, title, link[href][rel], title, meta, style, script {
  display: block;
  max-width: 1000px;
  margin: 1em auto;
 }

 link[href][rel]::after {
  content: attr(rel);
  text-transform: capitalize;
 }

 meta[charset]::after {
  content: 'Charset: ' attr(charset);
 }

 meta[name][content]::after {
  content: attr(name) ': ' attr(content);
  text-transform: capitalize;
 }

 /* That’s it really. The following is just to add some style: */

 head {
  margin: 20px auto;
  width: 960px;
  font: 14px/1.5 Arial, sans-serif;
 }

 title {
  font-size: 26px;
  font-weight: bold;
 }

 link[href][rel] {
  float: left;
  cursor: pointer;
  padding: 0 10px;
  margin-bottom: 10px;
  height: 30px;
  line-height: 29px;
  text-decoration: none;
  color: #d3d3d3;
  background: #333;
  margin-right: 5px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, .25);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
 }

 link[href][rel]:hover, link[href][rel]:focus {
  background: #666;
  color: #fff;
 }

 script:not([src]), style {
  clear: both;
  margin: 1em auto;
  padding: 5px;
  border: 1px solid #666;
  background: #ddd;
  font-family: Monaco, 'Lucida Console', 'Courier New', monospace;
  white-space: pre;
 }

 script[src]:after {
  content: ': External file: ' attr(src);
 }

 script:before, style:before {
  content: 'JS';
  font-size: 2em;
  font-weight: bold;
  font-family: Arial, sans-serif;
 }

 style:focus {
  background: #eee;
 }

 style:before {
  content: 'CSS'
 }