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

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脚本!
打开Chrome浏览器

在书签栏点击右键,选择添加网页,把上面的代码复制到网址输入框

效果如下:

posted @ 2021-09-01 12:14  KaypoGeng  阅读(101)  评论(0)    收藏  举报