html 108字节CSS布局调试器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 108字节CSS布局调试器相关的知识，希望对你有一定的参考价值。
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)})
```
~73 byte code-golfed version by @xem
```javascript
$$('*').map(A=>A.style.outline=`1px solid hsl(${(A+A).length*9},99%,50%`)
```
~66 byte code-golfed version by @daliborgogic
```javascript
$$('*').map((A,B)=>A.style.outline=`1px solid hsl(${B*B},99%,50%`)
```
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:
Tested from Firefox DevTools:
Tested from WebKit Nightlies (Safari):
Tested in IE:
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:
Thanks for the awesome help improving this folks <3function(a){ // Supply a valid selector (e.g '*' for wildcard)
[].forEach.call( // Treat Nodelist as an Array (fewer bytes than Array.prototype.forEach.call(...);)
// Gets the prototype of Array & uses call to execute the function on the NodeList.
document.querySelectorAll(a), // Query DOM for elements matching the supplied selector
// (For 108 bytes, use $$() as Chrome, Safari & FF expose it in DevTools)
function(b){
b.style.outline = "1px solid #" + // Set the selector outline
(~~(Math.random()*(1<<24))) // Pick a valid random CSS hex color
.toString(16)}) // Convert to a base 16 number. BOOM.
}function(a){return [].forEach.call(document.querySelectorAll(a),function(b){b.style.outline = "1px solid #" +(~~(Math.random()*(1<<24))).toString(16)});}{
"name": "CSSLayoutDebugger",
"description": "A helper for debugging CSS layouts",
"keywords": [
"css",
"layout",
"debugger"
]
}<!DOCTYPE html>
<title>CSS Layout Debugger</title>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<div>I am element</div>
<script>
var myFunction = function(a){ // Supply a valid selector (e.g '*' for wildcard)
[].forEach.call( // Treat Nodelist as an Array (fewer bytes than Array.prototype.forEach.call(...);)
// Gets the prototype of Array & uses call to execute the function on the NodeList.
document.querySelectorAll(a), // Query DOM for elements matching the supplied selector
// (For 110 bytes, use $$() as Chrome, Safari & FF expose it in DevTools)
function(b){
b.style.outline = "1px solid #" + // Set the selector outline
(~~(Math.random()*(1<<24))) // Pick a valid random CSS hex color
.toString(16)}) // Convert to a base 16 number. BOOM.
}
myFunction('*');
</script>
<!-- quick JSBin:http://jsbin.com/soseq/2/edit -->以上是关于html 108字节CSS布局调试器的主要内容，如果未能解决你的问题，请参考以下文章