A light-weight CSS debugger with super-powers !

To use it :

• Download the style cascading.css
• Add the debug attribute to any element of your page ( <div debug>...</div> )
• Watch the cascading CSS debugger in action

To force the cascading debugger, or to have the whole DOM debugged, paste this line to your DevTool console :

javascript:

var allElements = document.querySelectorAll('*');

Array.prototype.forEach.call(allElements, function (element) {
  element.setAttribute('debug', '');
})

Or jQuery :

$(function(){
  var all = $('*');
  all.each(function(){
    $(this).attr('debug','');
  })
})

###Demo :

See the Pen Cascading CSS debugger by LukyVJ (@LukyVj) on CodePen.

2015 - bullg.it