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.

Simply include a link to the stylesheet in the head (i.e. before the ) of your document, like so:

<link href="https://raw.githubusercontent.com/mattl/debug-css/main/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.

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.