有点小用的样式检查方法

开发调优
,
1

有时候我们在检查元素对齐或是查看元素容器范围时，需要单独去打开控制台并逐个参数对比，其实我们也可以直接给所有元素加上一个边框，先整体预览一下，发现不对劲的再去单独调试。

为了方便，可以将下列代码直接存为书签，需要用到时点一下就行了，再次点击可关闭效果。

javascript: (() => {  const headElement = document.head;  const styleElement = document.createElement('style');  styleElement.setAttribute('debug-css', '');  styleElement.innerText = '* { outline: 1px solid tomato; }';  const debugElement = headElement.querySelector('[debug-css]');  if (debugElement) return debugElement.remove();  headElement.append(styleElement);})()

具体效果如下

image
image1421×793 97.6 KB

28 个赞
2

鹅佬太强啦！！！

5 个赞
3

前排前排前排，先评论后看

4 个赞
4

这个可以，确实很实用，对我这个小白来说 :tieba_025:

2 个赞
5

鹅佬是专业css的

2 个赞
6

还不够专业，得继续精进 :tieba_086:

2 个赞
8

龙王の认可.jpg

1 个赞
9

好办法，学到了

2 个赞
10

也可以用这个油猴脚本

(function() {
    'use strict';

    var KEY_CODE = 117 // F6  修改这里绑定自己的快捷键
    var remove // 用于记录remove函数 以及判端移除还是插入

    function insertStyle(){
        var styleContent = 'body * {outline: 1px solid red}'
        var styleTag = document.createElement('style')

        styleTag.innerHTML = styleContent
        document.head.appendChild(styleTag)
        return function removeStyle(){
            styleTag.parentNode.removeChild(styleTag)
        }
    }

    window.addEventListener('keydown', function(e){
        if(e.keyCode === KEY_CODE) {
            if(remove){
                remove()
                remove = null
            }else {
                remove = insertStyle()
            }
        }
    })
})();
2 个赞
11

这个思路不错哎 :+1:t2:

2 个赞
12

鹅鹅课堂开课啦！
2 个赞
13

强强，学习下方便检查

2 个赞
14

鹅佬太强了 :tieba_003:

2 个赞
15

专业，太专业了

2 个赞
16

好强，立马出新品！

2 个赞
17

太牛了,特别有用!

2 个赞
18

不愧是大鹅！厉害！

1 个赞
19

玩起来很有意思

1 个赞
20

n 年前我也用过这方法，不过那时候做得比较简单，就直接在css里加
* {border: 1px solid red}
没想到有大佬把这个想法写成js还可以开关:+1:t2::+1:t2:

1 个赞
21

image
image1888×595 134 KB

代码原来是这么用的

1 个赞