-
-
Save chilianubogdan/94921c95273fe2c3b166b88ad9aae012 to your computer and use it in GitHub Desktop.
A *simple* CSS debugger. To use, bookmark "Debug CSS" at https://zaydek.github.io/debug.css. Learn more here https://medium.freecodecamp.org/88529aa5a6a3 and https://youtu.be/2QdzahteCCs?t=1m25s (starts at 1:25)
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
| /* debug.css | MIT License | zaydek.github.com/debug.css */ if (!("is_debugging" in window)) { is_debugging = false; var debug_el = document.createElement("style"); debug_el.append(document.createTextNode(`*:not(g):not(path) { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important; box-shadow: none !important; filter: none !important; }`)); } function enable_debugger() { if (!is_debugging) { document.head.appendChild(debug_el); is_debugging = true; } } function disable_debugger() { if (is_debugging) { document.head.removeChild(debug_el); is_debugging = false; } } !is_debugging ? enable_debugger() : disable_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
| /*! debug.css v0.0.1 | MIT License | zaydek.github.com/debug.css */ | |
| :not(g):not(path) { | |
| color: hsla(210, 100%, 100%, 0.9) !important; | |
| background: hsla(210, 100%, 50%, 0.5) !important; | |
| outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important; | |
| box-shadow: none !important; | |
| filter: none !important; | |
| } |
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
| /*! debug.css v0.0.2 | MIT License | https://gist.github.com/zaydek/6b2e55258734deabbd2b4a284321d6f6 */ | |
| .debug *:not(g):not(path) { | |
| color: hsla(210, 100%, 100%, 0.9) !important; | |
| background: hsla(210, 100%, 50%, 0.5) !important; | |
| outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important; | |
| box-shadow: none !important; | |
| filter: none !important; | |
| } |
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
| /*! debug.css v0.0.3 | MIT License | https://gist.github.com/zaydek/6b2e55258734deabbd2b4a284321d6f6 */ | |
| [debug], | |
| [debug] * { | |
| color: hsla(210, 100%, 100%, 0.9) !important; | |
| background: hsla(210, 100%, 50%, 0.5) !important; | |
| outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important; | |
| box-shadow: none !important; | |
| filter: none !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
v4 bookmarklet (includes pseudo elements)
javascript:/* debug.css | MIT License | zaydek.github.com/debug.css / if (!("is_debugging" in window)) { is_debugging = false; var debug_el = document.createElement("style"); debug_el.append(document.createTextNode(:not(g):not(path), *:not(g):not(path):after, *:not(g):not(path):before { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important; box-shadow: none !important; filter: none !important; })); } function enable_debugger() { if (!is_debugging) { document.head.appendChild(debug_el); is_debugging = true; } } function disable_debugger() { if (is_debugging) { document.head.removeChild(debug_el); is_debugging = false; } }!is_debugging ? enable_debugger() : disable_debugger();
@davewiard I used to be the same but until I started using a wide range of bookmark tools (bookmarklets) it's been very useful in development & design work and I haven't looked back. I created a simple bookmarklet that gives me a series of prompts which I use to add or remove a cookie in about 3 seconds without devtools open.