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

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

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

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

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

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

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

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

commented Mar 28, 2019

da bomb

@Tig10

This comment has been minimized.

Copy link

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.

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.