Chrome 開發者工具官方中文文件
傳送門
Elements面板（https://zhuanlan.zhihu.com/p/24535735?refer=thinkingInFE）
Elements 面板主要用於對頁面 HTML 和 CSS 的檢查以及視覺化編輯。
這是我的 Github 首頁的 Elements 面板：
可以看到整個面板被分成 3 個部分，左上是一棵 DOM 樹，左下是選中元素的所有父節點，右邊是選中元素的樣式。左下的部分比較簡單，不做詳細說明。
DOM 樹
檢查頁面元素
右擊頁面任意一處，選擇檢查 / 審查元素，檢視選中頁面對應的 DOM 元素
點選
當圖示顯示為藍色時，滑鼠點選頁面任意一處，可以檢視選中頁面對應的 DOM 元素
滑鼠懸停 DOM 樹上的任意一個節點，頁面會用淡藍色的蒙板在頁面上標記 DOM 節點對應的頁面
按鍵盤的向上向下鍵可以在展開的節點之間進行切換，向左向右鍵可以收縮和展開節點
編輯 DOM
你可以任意修改 DOM 樹上的任意資訊，比如修改節點的型別、屬性，或者改變 DOM 節點的所屬關係等等。不過需要注意的是，這些修改都是臨時的，不會得到儲存，當重新整理頁面時所有修改都將重置。
雙擊元素標籤，修改 DOM 節點型別，比如將 div 改成 ul
雙擊元素屬性，修改 DOM 節點屬性，比如修改節點的 id
選擇一個 DOM 節點，按 enter 鍵，然後按 tab 鍵選擇想修改的屬性或標籤
選擇一個 DOM 節點，並將其拖到目標位置，可以改變頁面元素的結構
選擇一個 DOM 節點，按 delete 鍵刪除
Ctrl + Z / Cmd + Z，撤回操作
這 6 個是比較常見的操作，操作起來也是直截了當，更多的操作可以通過選中一個 DOM 節點，再右擊進行檢視：
Add Attribute：為選中節點新增一個屬性
Edit Attribute：修改選中節點中選中屬性
Edit as HTML：將選中節點當做 HTML 進行編輯
複製選中的節點，可以複製選中節點的選擇器、XPath、元素本身、outerHTML 等，也能剪下、貼上節點，我們一般選擇複製節點的選擇器
Hide element：隱藏節點
Delete element：刪除節點
Expand all：展開所選節點下的所有子節點
Collapse all：收縮所選節點下的所有子節點，包括自己
4 個偽類：選中則表示所選節點處於相應的狀態，比如選中 :hover 則表示所選節點當前正處於滑鼠懸停的狀態
Scroll into View：如果所選的 DOM 節點對應的頁面元素不在可視區域內的話，點選這個選項則會將頁面滾動到可以顯示對應的頁面元素的位置
Break on：給 DOM 節點設定斷點，主要用來除錯 JavaScript 程式碼，這段程式碼的作用是用來修改所加斷點的 DOM 節點，這一般用在比較複雜的網頁應用當中。可以給所選的 DOM 節點新增 3 種類型的斷點：
-
subtree modifications：所選節點的子節點被新增、刪除、移動的話，則會觸發
-
attribute modifications：所選節點的屬性被修改的話，則會觸發
-
node removal：所選節點被刪除的話，則會觸發
這 3 種斷點可以同時作用在一個節點上。為了便於大家理解，我們舉個例子。拿 jQuery 官網舉例（主要在 Console 裡可以使用 jQuery）：
我給 header 節點加一個 “attribute modifications” 的斷點，如下圖所示：
我在 Console 中輸入這一句程式碼並回車：
$("header").attr("id", "my-header")
你會發現頁面處於 debug 模式，並且程式碼會跳轉到修改選中節點屬性的 JavaScript 程式碼那裡：
樣式
其實把右邊的那一塊統稱為樣式有點不恰當，因為這一塊主要由 5 個小的面板組成：
分別是：
Style：實時編輯與所選元素相關的樣式
Computed：檢查編輯所選元素的盒模型
Event Listeners：檢視與所選元素相關的 JS 事件監聽
DOM Breakpoints: DOM 斷點
Properties：所選節點對應的物件及父類們
Styles
Styles 面板可以允許你通過各種方式來修改元素的樣式，並且會想方設法使得你除錯時簡單方便。
按照上圖標註的序號進行描述：
element.style：代表所選元素的內聯樣式。比如我選擇的是 Github 的 header 塊，如果我直接修改其 HTML 為 <div class="header" style="background: red"></div>，那麼 element.style 中就會出現 background: red;，相反，如果我在 element.style 塊中點選任意空白處，新增 CSS 樣式，那麼你會在對應的元素節點上看到 style 屬性，值就是你寫在 element.style 內的內容
滑鼠懸浮在 “三點圖示” 上會出現
可以幫助你通過視覺化介面的形式除錯 text-shadow、 box-shadow、 color、 background。另外，最後一個 “+” 的符號代表可以新增新的 CSS 規則（在 element.style 中沒有）
單擊屬性或者屬性值，進行修改，按 tab 鍵修改下一個屬性或值，按 tab + shift 修改上一個屬性或值。當值是數字型別時，按上下鍵可以以 1 為單位遞增或遞減，按 alt + 上下鍵以 0.1 為單位遞增或遞減，shift + 上下鍵以 10 為單位遞增或遞減，記不得這些快捷鍵就老老實實手動輸入吧；點選空白處，新增新的樣式
Style 面板對 color 非常友好，點選色塊可以開啟取色器（color picker，取色器功能非常強大，大家自行感受），然後對顏色進行視覺化編輯。同樣的，shadow 屬性也能如此
以 “Inherited from …” 為分界，上面的樣式都是作用於元素本身的，下面的都是其繼承而來的，繼承的物件一般不止一個，可能是父元素，父元素的父元素…
將滑鼠懸停在一個選擇器上時，可以看到這個選擇器所影響的所有頁面元素（不包括可視區域外的元素）
這邊有 3 個選項
-
點選 “:hov”，出現
-
可以強制所選元素處於某個狀態，這個也能通過右擊元素，選擇一個狀態來實現 -
點選 “.cls”，出現
檢視所有與當前元素直接相關的樣式規則，你可以禁止/允許某個類作用於所選元素，也可以新增新的類 -
點選 “+”，新建一個樣式規則
對樣式進行了修改之後，如果你想儲存這些修改，你可以參考這篇官方文件。現在的 CSS 檔案基本上都是編譯後的結果，而儲存的檔案一般也是編譯後的 CSS 檔案，所以這麼做的作用不大（如果有可以直接儲存原始樣式檔案的方法，大家可以留言）。所以我們一般將 Styles 面板當做一個所見即所得的除錯工具。
Computed
Computed 面板顯示瞭如下內容：
所選元素的盒模型
所選元素的 CSS 樣式以及值，不僅顯示最終所採用的值，也顯示被覆蓋了的值
每個屬性值所在的檔案
滑鼠懸停在盒模型上的 margin、border、padding 以及內容區域，可以在網頁中看到與之相對應的區域。你還可以雙擊盒模型上的數字來修改它。如果所選元素的 position 屬性的值為 absolute 或者 fixed 的話，還可以在 margin 的外圍設定 position。
Event Listeners
上圖擷取的是知乎首頁頂部的“提問”按鈕對應的 <button class=...>提問</button>。Event Listeners 面板顯示了這個節點註冊的所有事件型別，展開一個事件型別（這裡是 click），可以看到這個型別下的所有處理函式。
在面板的頂部有一排選項：
Ancestors：禁止則只顯示直接定義在所選元素上的事件監聽
監聽器型別：Passive / Blocking / All：Passive Event Listener 是從 Chrome 51 開始新增的一個新特性，主要用來讓頁面滑動更加流暢
Framework listeners：很多框架、類庫都封裝了原生的事件，禁止 Framework listeners 可以檢視事件在框架或類庫的程式碼下的實現，而允許 Framework listeners 則可以深入框架或類庫內部檢視事件定義的程式碼
DOM Breakpoints
我給 Github 的表示 head 的塊添加了 3 個 DOM 斷點：
當把滑鼠懸停在節點識別符號上時可以在網頁相應區域顯示對應的頁面元素，勾選前面的複選框代表斷點有效，不勾選代表斷點雖然存在，但無法使用。
Properties
這是所選 DOM 節點對應的物件以及這個物件的父類、父類的父類…的集合。