一段简单的css debugger代码

在做前端开发常常需要给元素添加一些轮廓来debug页面元素的布局，在github上看到一段很简单的js代码，它结合了css，给元素添加轮廓，以便对css，html页面观察dom元素的布局。

完整代码如下：

/* 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(path):not(g) { 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; }`));
}
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();

JavaScript主要是用来开启/关闭debugger。主要内容是它在页面添加的css样式。

添加轮廓

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

1、使用*号匹配所有的元素，使用outline给所有的元素提娜佳轮廓。

2、在样式后面添加!important，这是需要覆盖原来元素定义的样式。

屏蔽矢量图和禁用box-shadow

*:not(path):not(g) {
    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;
}

使用

1、体验地址：zaydek.github.io/debug.css

2、把页面上的“Debug CSS”添加到书签

3、点击“Debug CSS”可以切换Debugger

项目地址：https://github.com/zaydek/zaydek.github.io