I’ve used a debug css file for years. Its changed a lot over time but I seem to have settled on a format that works well with my workflow and other debugging tools (Firebug). This simple css file simply gives a background colour to every element to quickly enable me to see how well these elements are arranged on screen.

At a glance you can tell what’s not aligned correctly, where spacing is uneven and where certain elements are breaking out of their containers.

It’s nothing special but saves me a lot of time so I thought i’d share incase it helps anyone else out there.

Download: debug.css

Feel free to use and improve. Let me know how this could be made more useful.