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;
}