HTMLの構造を可視化する(Chrome用)

gistfile1.js

javascript:(function(){
  var sheet = [];
  [].forEach.call(document.querySelectorAll('[id]'), function(i){
    var selector = i.tagName + '#' + i.id;
    sheet.push(
      selector + ' { outline: 1px solid #f66 }',

      selector + '::before { '
        + 'content: "' + selector  + '";'
        + 'position: absolute;  z-index: 100;'
        + 'margin: 1px;  padding: 4px;  border: 1px solid white;  border-radius: 4px;'
        + 'color: #666; background: greenyellow;  font: 11px/1.2 arial;'
      + '}',

      selector + ':target { background: #ffc }',

      selector + ':target::before, ' + selector + ':hover::before '
        + '{ z-index: 200;  background-color: yellow }'
    );
  });

  var style = document.createElement('style');
  style.textContent = sheet.join('\n');
  document.head.appendChild(style);
})();