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

```javascript
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
```

Using `document.querySelectorAll`:

~ 131 byte version

```javascript
[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
```

If you're looking for a proper version that uses a set color per tag type, check out [pesticide.io](http://pesticide.io).

## Screenshots

Tested from Chrome DevTools:

![](http://i.imgur.com/8w5y2q1.png)

Tested from Firefox DevTools:

![](http://i.imgur.com/3qgOAXJ.png)

Tested from WebKit Nightlies (Safari):

![](http://i.imgur.com/HeUZE2V.png)

Tested in IE:

![](http://i.imgur.com/j4A3eNq.png)

Thanks to [gregwhitworth](https://twitter.com/gregwhitworth/status/515533526549024768) for verifying.

# Tag Specific Layout Debugging In 82 Bytes

My original implementation outlined each DOM element on the page with a random (valid) hex color. 

Thanks to the work by @aemkei, @p01, @sindresorhus and other commenters, we now have an even shorter version (108 bytes golfed down to 82) that uses a specific hex color *per tag name*. This lets you visually group elements similar to how pesticide.io does. 

```js
for(i=0;A=$$("*")[i++];)A.style.outline="solid hsl("+(A+A).length*9+",99%,50%)1px"
```

Preview:

![](http://i.imgur.com/N5VkRC6.png)

Thanks for the awesome help improving this folks <3