Last active
May 28, 2024 19:18
-
Star
(237)
You must be signed in to star a gist -
Fork
(42)
You must be signed in to fork a gist
-
-
Save zaydek-old/6b2e55258734deabbd2b4a284321d6f6 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 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 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 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 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; | |
| } |
da bomb
I found version 3 not working, but version 1 working OK when I simply linked debug.css from my index page.
I found version 3 not working, but version 1 working OK when I simply linked debug.css from my index page.
@Tig10 Apply it as html attribute:
<body debug>
...
</body>To highlight the difference, v3 works where v1 falls short such as this directly applying to heading elements:
<h1 class="debug">Debug v1 has no effect on this one!</h1><h1 debug>Works as expected with v3</h1>
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.