A tweet-sized debugger for visualizing your CSS layouts.
One-line version to paste in your DevTools:
[].forEach.call($("*"),function(a){a.style.outline="1px solid #"+(+~~(Math.random()*(1<<24))).toString(16)});
-
-
Save gokulkrishh/0eeb87d41c056eea67bd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(a){ // Supply a valid selector (e.g '*' for all) | |
| [].forEach.call( // Convert Nodelist -> Array | |
| document.querySelectorAll(a), // Query for the selector (could be shortened to $() as Chrome & 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. | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(a){return [].forEach.call(document.querySelectorAll(a),function(b){b.style.outline = "1px solid #" +(+~~(Math.random()*(1<<24))).toString(16)});} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2014 | |
| Copyright (C) 2014 Addy Osmani @addyosmani | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE FUCK YOU WANT TO. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "CSSLayoutDebugger", | |
| "description": "A helper for debugging CSS layouts", | |
| "keywords": [ | |
| "css", | |
| "layout", | |
| "debugger" | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| // write a small example that shows off the API for your example | |
| // and tests it in one fell swoop. | |
| var myFunction = function(a){ // Supply a valid selector (e.g '*' for all) | |
| [].forEach.call( // Convert Nodelist -> Array | |
| document.querySelectorAll(a), // Query for the selector (could be shortened to $() as Chrome & 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment