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:
html
Copy
<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:
html
Copy
<body class="debugCSS">Tip
As in this demo, you could create a switch button which toggle add / remove this class as you wish:
html
Copy
<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.