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" | |
}, |