一段简单的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


版权声明:著作权归作者所有。

相关推荐

一些有用的pandas代码片段

# 列出dataframe指定列的唯一值 df['Column Name'].unique() # 把列的数据类型转换为数字。如果有非数字值,则会出错。 pd.to_numeric(df['Column Name']) # 把列的数据类型转换为数字,如果非数字值,则会转换为NaN pd.to_numeric(df['Column Na

如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。实质上,CSS变量允许你跳过设置样式的旧方式:h1 {   font-size: 30px; } navbar > a {   font-si

使用Node.js实现一个简单的web服务器

这是使用Node.js写的一个简单Web服务器示例,分为三部分:响应http请求路由url读取静态文件响应新建一个app.js文件作为此web服务器的入口。响应http请求首先我们引入http模块,创建一个http服务器。const http = require('http'); const hostname = '127.0.0.1'

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

[译]代码优先的Java 9模块系统教程(一)

Java平台模块系统(JPMS)将模块化带入Java和JVM,并改变了我们在大型应用中的编程方式。 为了充分利用它,我们需要很好地了解,第一步是学习基础知识。 在本教程中,我首先向你展示一个简单的Hello World示例,然后我们用Java 9将一个现有的demo程序模块化。我们将创建模块声明(module-info。java),使用模块路径来编译,打包,以及运行程序——先代