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)

bookmark.min.js

/* 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-v0.css

/*! 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-v1.css

/*! 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-v3.css

/*! 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;
}

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!

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

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

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.

@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.

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.

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>