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
| { | |
| "auto_complete_commit_on_tab": true, | |
| "color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme", | |
| "draw_white_space": "all", | |
| "font_face": "Fira Mono", | |
| "font_size": 20, | |
| "tab_size": 2, | |
| "theme": "Brogrammer.sublime-theme", | |
| "translate_tabs_to_spaces": true, | |
| "trim_automatic_white_space": true, |
| Element.prototype.parents = function(selector) { | |
| var elements = []; | |
| var elem = this; | |
| var ishaveselector = selector !== undefined; | |
| while ((elem = elem.parentElement) !== null) { | |
| if (elem.nodeType !== Node.ELEMENT_NODE) { | |
| continue; | |
| } | |
| { | |
| "USD": { | |
| "symbol": "$", | |
| "name": "US Dollar", | |
| "symbol_native": "$", | |
| "decimal_digits": 2, | |
| "rounding": 0, | |
| "code": "USD", | |
| "name_plural": "US dollars" | |
| }, |