自己写的页面使用：
body * { outline: 1px solid red }方法1:控制台输入：
// https://juejin.im/post/6844903950609547272 var css = document.createElement('style') css.innerHTML = `* { background-color: rgba(255,0,0,.2); } * * { background-color: rgba(0,255,0,.2); } * * * { background-color: rgba(0,0,255,.2); } * * * * { background-color: rgba(255,0,255,.2); } * * * * * { background-color: rgba(0,255,255,.2); } * * * * * * { background-color: rgba(255,255,0,.2); } * * * * * * * { background-color: rgba(255,0,0,.2); } * * * * * * * * { background-color: rgba(0,255,0,.2); } * * * * * * * * * { background-color: rgba(0,0,255,.2); } * * * * * * * * * * { background-color: rgba(0,0,255,.2); } ` document.querySelector('head').appendChild(css)方法2: chrome书签调试style：
//方法2： javascript: (function() { var elements = document.body.getElementsByTagName('*'); var items = []; for (var i = 0; i < elements.length; i++) { if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) { items.push(elements[i]); } } if (items.length > 0) { for (var i = 0; i < items.length; i++) { items[i].innerHTML = ''; } } else { document.body.innerHTML += '<style>* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\ * * { background-color: rgba(0,255,0,.2) !important; }\ * * * { background-color: rgba(0,0,255,.2) !important; }\ * * * * { background-color: rgba(255,0,255,.2) !important; }\ * * * * * { background-color: rgba(0,255,255,.2) !important; }\ * * * * * * { background-color: rgba(255,255,0,.2) !important; }\ * * * * * * * { background-color: rgba(255,0,0,.2) !important; }\ * * * * * * * * { background-color: rgba(0,255,0,.2) !important; }\ * * * * * * * * * { background-color: rgba(0,0,255,.2) !important; }</style>'; } })();方法3：同2，只是利用浏览器扩展，将脚本放在脚本管理器的扩展工具中，没有生效
//https://greasyfork.org/zh-CN/scripts/390545-ui-debug-tool
网页所有元素加了outline的效果：
