Craig Johnson craigdanj

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

    //Function to check type in JS.
    function typeCheck(x) {
        return Object.prototype.toString.call(x);
    }

    //Test Code:
    var x;
    var y = null;

	<html>
	<head>
	<title>Foo Bar</title>
	</head>

	<body>
	<h1>Foo Bar</h1>
	<a href=”/baz”>Baz</a>
	</body>
	</html>

	import style from './style/css';

	function postTitle() {
	return <h1 className={style.postTitle}></h1>;
	}

	.postTitle {
	color: #444;
	font-size: 24px;
	}