在業務開發過程中，想必大家經常會需要檢視一個元素的位置及大小並修改它的 CSS，因此就會頻繁使用到 DevTools 中的選擇元素功能。
其實我們可以使用一個 CSS 技巧給所有元素加上 outline，這樣就能迅速瞭解自己所需的元素位置資訊，無須再選擇元素檢視了。
我們只需要新增以下 CSS 就能為任何網站新增這樣的效果
body * {
outline: 1px solid red
}
複製程式碼需要注意的是這裡我沒有使用 border 的原因是 border 會增加元素的大小但是 outline 不會。
通過這個技巧不僅能幫助我們在開發中迅速瞭解元素所在的位置，還能幫助我們方便地檢視任意網站的佈局。
筆者最喜歡用這個技巧來檢視元素是否對齊。
但是當下這個技巧需要我們手動新增 CSS 來實現，顯得略微有點雞肋，是否可以通過一個開關來實現任意網頁開啟關閉這個功能呢？
答案是有的，我們需要藉助 Chrome 的書籤功能。
- 開啟書籤管理頁
- 右上角三個點「新增新書籤」
- 名稱隨意，貼上以下程式碼到網址中
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 中的內容。
最後
文章首發自筆者的 部落格
覺得內容有幫助可以關注下我的公眾號 「前端真好玩」咯，定期分享以下主題內容：
- 前端小知識、冷知識
- 原理內容
- 提升工作效率
- 個人成長