UI调试技巧

身为前端，UI调试每次使用chorme的控制台总感受很麻烦，最近正好看到网上有大神提供的两种方法，以为不错，写下来但愿更多的人看到。

1. 在控制台输入

   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. 经过书签实现

   方法：

   1. 打开书签管理页
   2. 右上角三个点「添加新书签」
   3. 名称随意，粘贴如下代码到网址中

   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>';
   	}
   })();
   复制代码

   使用时只须要在当前页面点击这个书签便可。效果：

今天又是学到的一天。