A cascading css debugger
CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
cascading.css
cascading.scss
test.html

README.md

Cascading-CSS-debugger

A cascading css debugger

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.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

2015 - bullg.it