In fact, it will outline every elements with specific colors and add horizontal and vertical alignment marks.
Download and use
First of all, please yourself:
Then, add it as an external style sheet:
<link rel="stylesheet" media="screen" href="css/debug.css" type="text/css" />And now, you just have to add a debugCSS class to the <body> tag:
<body class="debugCSS">Tip
As in this demo, you could create a switch button which toggle add / remove this class as you wish:
<a class="demo" onclick="document.body.classList.toggle('debugCSS');">Switch debug CSS</a>Info
A little downside: Depending the power of your machine, your browser should work a bit slower because of the huge amount of additional style, but hey, just the time to finalize your wonderful CSS.
Combined with the amazing browser extension Web Developer, you could save a lot of sleep time during your web integration job.