很好用的 UI 調試技巧

在業務開發過程當中，想必你們常常會須要查看一個元素的位置及大小並修改它的 CSS，所以就會頻繁使用到 DevTools 中的選擇元素功能。

其實咱們可使用一個 CSS 技巧給全部元素加上 outline，這樣就能迅速瞭解本身所需的元素位置信息，無須再選擇元素查看了。

咱們只須要添加如下 CSS 就能爲任何網站添加這樣的效果

body * {
    outline: 1px solid red
}
複製代碼

須要注意的是這裏我沒有使用 border 的緣由是 border 會增長元素的大小可是 outline 不會。

經過這個技巧不只能幫助咱們在開發中迅速瞭解元素所在的位置，還能幫助咱們方便地查看任意網站的佈局。

筆者最喜歡用這個技巧來查看元素是否對齊。

可是當下這個技巧須要咱們手動添加 CSS 來實現，顯得略微有點雞肋，是否能夠經過一個開關來實現任意網頁開啓關閉這個功能呢？

答案是有的，咱們須要藉助 Chrome 的書籤功能。

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

而後咱們就能夠在任意網站上點擊剛纔建立的書籤，內部會判斷是否存在調試的 style。存在的話就刪除，不存在的話就添加，經過這種方式咱們就能很方便的經過這個技巧查看任意網頁的佈局了。

PS：以上書籤的技巧參考自此處，原內容略微繁瑣，筆者改動了 style 中的內容。

最後

文章首發自筆者的 博客

以爲內容有幫助能夠關注下個人公衆號 「前端真好玩」咯，按期分享如下主題內容：

• 前端小知識、冷知識
• 原理內容
• 提高工做效率
• 我的成長