Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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)
/* 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();
/*! 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;
}
/*! 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;
}
/*! 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;
}
@Emgo-Dev

This comment has been minimized.

Copy link

Emgo-Dev commented Jun 5, 2018

Super cool! I think we've all come across these struggles with CSS, but kudos to go and build a useful tool like this. I absolutely love a clean box model so this will satisfy my obsessive side!

@ZAYDEK

This comment has been minimized.

Copy link
Owner Author

ZAYDEK commented Jun 7, 2018

Just posted a [short] talk about it. Starts at 1:25: https://youtu.be/2QdzahteCCs?t=1m25s

@joeySmalls

This comment has been minimized.

Copy link

joeySmalls commented Jun 15, 2018

This is a great idea! I love having the visual guide, it just feels so much clearer. Using it on a project I'm working on and it was like an aha moment for me. Very clever tool you have here.

@davvyy00

This comment has been minimized.

Copy link

davvyy00 commented Jun 26, 2018

I like the tool, but your comment about googles application is a bit unrealistic
Most modern applications use frameworks like react, angular and extjs ext.
These frameworks create cascading div's so its impossible to create clean uncomplicated div elements
Are you using a framework?
I do as I said like the tool

@ZAYDEK

This comment has been minimized.

Copy link
Owner Author

ZAYDEK commented Jun 30, 2018

Hey @davvyy00 I am using Vue and it doesn't require you to create endless divs for the sake of the design. Between using templates and components I haven't had that problem.

@davewiard

This comment has been minimized.

Copy link

davewiard commented Jul 17, 2018

@ZAYDEK Brilliant solution! I've added "Debug CSS" not as a bookmark but instead as a button on my pages. I'd never find the bookmark, given how little I use bookmarks. I've added this to my HTML/CSS and Angular projects. I styled the link as a button and have it absolute positioned near the top-left corner of each page. It's not an ideal solution but it works very well for my needs. If I ever decide to publish to the public I can easily remove one line of code from half a dozen files.

@branditodesign

This comment has been minimized.

Copy link

branditodesign commented Jul 17, 2018

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.

@christopinka

This comment has been minimized.

Copy link

christopinka commented Mar 28, 2019

da bomb

@Tig10

This comment has been minimized.

Copy link

Tig10 commented Jul 9, 2019

I found version 3 not working, but version 1 working OK when I simply linked debug.css from my index page.

@snnsnn

This comment has been minimized.

Copy link

snnsnn commented Sep 10, 2019

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
You can’t perform that action at this time.