值得擁有的 UI 調試技巧

今天加班學會了一個UI調試技巧，發現真的很不錯，於是馬上手動試驗了一把

如圖：

 

 

 結合我們實際業務開發，當我們查看一個元素的位置及大小並修改它的 CSS，我們會使用開發者工具的因此就會頻繁使用 DevTools 中的選擇元素功能。

 

 

這樣做感覺太拉低調試效率了，所以第一張圖是的效果是怎麼實現的呢？

很簡單，只需要在網站添加以下樣式即可：

html * {
    outline: 1px solid red
}

這裏沒有使用 border 的原因是 border 會增加元素的大小但是 outline不會。

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

 另外我們還可以通過一個開關來實現任意網頁開啓關閉這個功能。

只需要藉助 Chrome 的書籤功能。

1. 打開書籤管理頁

2. 右上角三個點「添加新書籤」

3. 名稱隨意，粘貼以下代碼到網址中

 1 javascript: (function() {
 2     var elements = document.body.getElementsByTagName('*');
 3     var items = [];
 4     for (var i = 0; i < elements.length; i++) {
 5         if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1) {
 6             items.push(elements[i]);
 7         }
 8     }
 9     if (items.length > 0) {
10         for (var i = 0; i < items.length; i++) {
11             items[i].innerHTML = '';
12         }
13     } else {
14         document.body.innerHTML +=
15             '<style>html * { outline: 1px solid red }</style>';
16     }
17 })();

 

 

然後我們就可以在任意網站上點擊剛纔創建的書籤（style標籤），內部會判斷是否存在調試的 style。存在的話就刪除，不存在的話就添加，通過這種方式我們就能很方便的通過這個技巧查看任意網頁的佈局了。

 

 

本文主要參考：https://mp.weixin.qq.com/s/tOgTYkgEYb95BZlzsXUJlQ