在浏览器的cosole控制台输入一段代码，能把页面的dom元素用不同的线标示出来，就是border

Question

我之前看过一篇文章，里面有一个调试css的，能把页面上所有的dom元素的范围 边框 用不同颜色的线标注出来，是在控制台输入的，代码不多，就一行，请问有知道的么

Answer 1

javascript: (function() {   const style = document.getElementById('outlineStyle');   if (style) { style.parentNode.removeChild(style);   }   else { const style = document.createElement('style'); style.innerText = '* {outline: 1px solid red}'; style.id = 'outlineStyle'; document.head.appendChild(style);   } })();

新建一个书签,将上面的代码代码作为网址保存.
点击书签打开调试模式,再次点击关闭.

不要用上面的那位的代码,性能差,dom多可能会卡顿.而且用border会导致盒模型扩大,使页面变形.

Answer 2

使用document.querySelector获取到body中所有的元素，然后循环设置即可：

document.querySelectorAll('body *').forEach(item => item.style.border = `1px solid rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})`)

不知道是不是你想要的！