HTML debugging with css.

bookmarklet-debughtml.js

// based on Ben Alman's Debugging with Less https://github.com/cowboy/benalman.com-idea/commit/d99edd33a5000875776393e28afa412496260850
// using Paul Irish's Bookmarklet: Inject New Css Rules http://paulirish.com/2008/bookmarklet-inject-new-css-rules/

(function (){
  var newcss = '';
  var tags = [['H1','#f00'],['H2','#0a0'],['H3','#00f'],['H4','#f0f'],['H5','#0ff'],['H6','#0ff'],['P','#0aa'],['LI','#aa0'],['A','#000']];
  var createMarker = function(tag, bg){
    return tag + ':before {padding: 0 4px; margin-right: 4px; color: #fff;content: "' + tag + '";background: ' + bg + ';} ';
  };
  for (var i = 0; i < tags.length; i++) {
    newcss += createMarker(tags[i][0], tags[i][1]);
  }
  if ('\v'=='v') /* ie only */ {
      document.createStyleSheet().cssText = newcss;
  } else {
    var tag = document.createElement('style'); tag.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(tag); 
    tag[ (typeof document.body.style.WebkitAppearance=='string') /* webkit only */ ? 'innerText' : 'innerHTML'] = newcss;    
  }
})()

// Bookmarklet <a href='javascript:(function(){var b="";var c=[["H1","#f00"],["H2","#0a0"],["H3","#00f"],["H4","#f0f"],["H5","#0ff"],["H6","#0ff"],["P","#0aa"],["LI","#aa0"],["A","#000"]];var e=function(f,g){return f+':before {padding: 0 4px; margin-right: 4px; color: #fff;content: "'+f+'";background: '+g+";} "};for(var d=0;d<c.length;d++){b+=e(c[d][0],c[d][1])}if("\v"=="v"){document.createStyleSheet().cssText=b}else{var a=document.createElement("style");a.type="text/css";document.getElementsByTagName("head")[0].appendChild(a);a[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=b}})();'>Debug HTML with CSS</a>