css分块代码,一段简单的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