Debug CSS is a small, standalone, stylesheet to help visually identify invalid and potentially inaccessible markup, during development.
It based entirely upon a portion of the excellent inuit.css (a powerful little framework designed for serious developers) by Harry Roberts, and all credit should go to him.
I simply broke out Inuit's _debug.scss and implemented it as a stand-alone stylesheet so that it can be quickly and easily linked to from any project to aid in fast visual debugging.
##Usage
Simply include a link to the stylesheet in the head (i.e. before the ) of your document, like so:
<link href="https://rawgithub.com/nternetinspired/debug-css/master/debug.css" media="all" rel="stylesheet" type="text/css" />
Heads up: Don't forget to remove the link to debug.css once you've finished debugging.
Alternatively, create a bookmark and copy the following code into the URL field to create a bookmarklet for quick debugging:
javascript:(function(){var e=document.createElement("link");e.setAttribute("href","https://rawgithub.com/nternetinspired/debug-css/master/debug.css");e.setAttribute("rel","stylesheet");e.setAttribute("type","text/css");e.setAttribute("media","all");document.head.appendChild(e)})();
If there are potential issues, you'll see some more colour on your site:
- Red == definite error
- Yellow == double-check
You can then simply check with your browser tools to see why that colour style is being applied.
Credit should go to inuit.css creator, Harry Roberts for the original _debug.scss in that framework.
Thanks also to @pjkix for adding the bookmarklet above.
Copyright 2013 Seth Warburton
Licensed under the Apache License, Version 2.0.