调试技巧：如何快速知道页面上所有元素的轮廓跟位置！

其实最简单的实现方法就是如下CSS代码：

* {
outline: 1px solid red;
}

效果如下：

注意：这里不用border的原因是，border会改变元素的大小。

但是啊，轮廓都是红色，这样看起来层次感还不够。所以我们需要给不同元素生成随机颜色的轮廓。

document.querySelectorAll("*").forEach(item => {
item.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

效果如下：

看起来还不错，对吧？但是，这样显得有点麻烦，每次都需要执行一段代码 ????

这里有一个方法可以把上面的代码做成一个开关，点击就开，再此点击就关。

首先代码的逻辑要跟上：

javascript: (function () {
// 初始化一个变量（因为每点一次标签都会执行这个函数，所以该函数内不存在全局变量，以下方式可解决）
if (typeof hasOutline == "undefined") hasOutline = false;

document.querySelectorAll("*").forEach(item => {
item.style.outline = hasOutline ? "none" : "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

hasOutline = !hasOutline;
})();

然后借用Chrome浏览器的书签功能，书签的网页内容可以放一个地址，也可以执行一段JS脚本！

效果如下：