Debugging CSS Box Layouts in Mobile Safari

I’ve been loosing hair while fighting with some CSS layouts in Mobile Safari for the past few days. The lack of debugging tools like the WebKit Inspector has left me throwing darts at my code trying to randomly guess what element is buggy. After a bit of serious thought I’ve came up with an ingenious solution by appending some rgba goodness to the end of my stylesheet.

/* enable for debugging */
* {
	color: rgba(200, 200, 200, 0.4) !important;
	border-color: rgba(0, 0, 0, 0.3) !important;
	background: rgba(0, 0, 0, 0.07) !important;
}

By setting all colours and fills using the rgba() property and a low alpha component you get an X-Ray like view of all elements on the page—without modifying the original layout:

Now you can easily see where boxes overlap and misalign.