Fun little one liner to do some debugging css.

debug_css.js

function debugAll() {
  [].forEach.call($$('*'), function(a) { 
    function cr() { return 0|(Math.random() * 255); };
    a.style.outline = '2px solid rgba(' + [cr(), cr(), cr()].join(',') + ', 0.44)';
  });
}

Could be done this way if you don't care to have nice transparencies.

[].forEach.call($$("*"),function(a){
  a.style.outline="2px dashed #"+(Math.random().toString(16).slice(-6))
})

Bringing this idea to its ultimate conclusion. (requires jquery atm 😒 )

var debuggerAll = function(showTag) {
[].forEach.call($("*"),function(a){
  function cr() { return 0|(Math.random() * 255); };
  color = 'rgba(' + [cr(), cr(), cr()].join(',') + ', 0.44)';
  a.style.outline = "2px solid " + color;
  a.style.position = 'relative';
  if (showTag) {
    style = [
      "-webkit-user-select: none",
      "user-select: none",
      "opacity: 1",
      "padding: 0 4px",
      "background: " + 'white',
      "border: 0px solid " + color,
      "font-weight: normal",
      "font-size: 18px",
      "color: " + color,
      "position: absolute",
      "bottom: -13px",
      "right:0" 
    ];
    info = $('<span class="debug" style="' + style.join(';') + '">' + $(a).prop('tagName') + '</span>');

    var outlineHover = {'outline-width': '3px', 'z-index': 100000};
    var outlineOut   = {'outline-width': '1px', 'z-index': 1};
    var hoverStyle = {'z-index': 100000, border: '1px solid'};
    var outStyle   = {'z-index': 1, border: 'none'};

    $(a).on('mouseenter',function(){$(this).css(outlineHover);$(this).children('.debug').css(hoverStyle);});
    $(a).on('mouseleave', function(){$(this).css(outlineOut);$(this).children('.debug').css(outStyle);});
    info.on('mouseenter',function(){$(this).parent().css(outlineHover);$(this).css(hoverStyle);});
    info.on('mouseleave', function(){$(this).parent().css(outlineOut);  $(this).css(outStyle);  });

    $(a).append(info);
  }
 });
}

debuggerAll('show');