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>';
   	}
   })();
   複製代碼

   使用時只須要在當前頁面點擊這個書籤便可。效果：

今天又是學到的一天。