simple-debug.css

simple-debug.css works by adding a 1 pixel outline to all elements on the page.

The script also progressively adds a transparent background color to all the elements on the page, and as elements are nested into each other, the background colors overlap, creating a deeper and darker color as the element is inside more containers.

This will let developers preview how elements align to each other on the page and detect any problems they might be having before launching the website in a production environment.

simple-debug.css can be installed as a regular CSS file in your projects, or you can load it temporary on any page via a simple browser bookmarklet.