Skip to content

Instantly share code, notes, and snippets.

@karenpayneoregon
Created August 19, 2023 19:38
Show Gist options
  • Save karenpayneoregon/207eb19dd5b6b021a739a39cfe595f9a to your computer and use it in GitHub Desktop.
Save karenpayneoregon/207eb19dd5b6b021a739a39cfe595f9a to your computer and use it in GitHub Desktop.
CSS debugging toggle
* {
outline: 1px solid red;
}
*:hover {
outline: 2px solid blue;
}
var $debugHelper = $debugHelper || {};
$debugHelper = function () {
var href = "lib/debugger.css";
var addCss = function () {
if (styleStyleIsLoaded(href) === true) {
return;
}
const head = document.head;
const link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = href;
head.appendChild(link);
};
var removeCss = function () {
if (styleStyleIsLoaded('debugger.css')) {
document.querySelector(`link[href$="${href}"]`).remove();
}
};
var toggle = function() {
if (styleStyleIsLoaded(href) === true) {
removeCss();
} else {
addCss();
}
}
var styleStyleIsLoaded = function () {
for (var index = 0, count = document.styleSheets.length; index < count; index++) {
const sheet = document.styleSheets[index];
if (!sheet.href) {
continue;
}
if (sheet.href.includes(href)) {
return true;
}
}
return false;
}
return {
addCss: addCss,
removeCss: removeCss,
isCSSLinkLoaded: styleStyleIsLoaded,
toggle: toggle
};
}();
document.addEventListener('keydown', function (event) {
if (event.key === '1' && event.altKey) {
$debugHelper.toggle();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment