身为前端,UI调试每次使用chorme的控制台总感觉很麻烦,最近正好看到网上有大神提供的两种方法,觉得不错,写下来希望更多的人看到。
-
在控制台输入
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)
效果:
-
通过书签实现
方法:
- 打开书签管理页
- 右上角三个点「添加新书签」
- 名称随意,粘贴以下代码到网址中
javascript: (function() { var elements = document.body.getElementsByTagName('*'); var items = []; for (var i = 0; i < elements.length; i++) { if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -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>html * { outline: 1px solid red }</style>'; } })();
使用时只需要在当前页面点击这个书签即可。效果:
今天又是学到的一天。