CSS Layout Debbuger
=====================

A tweet-sized debugger for visualizing your CSS layouts. Gives 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.

# Improvements

There are several optimizations made in the comments that improve on the original source - check em' out. One that goes beyond code-golfing in this version by @aemkei that mimics pesticide.io, using a specific color for every tag name:

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

Preview:

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