譯者按： 關於使用Chrome開發者工具非常全面的介紹，值得一讀！

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

我強烈感覺到至少有一半人會這麼想：“HTML/CSS甚至算不上一門程式語言”。不過，前端開發中，HTML/CSS方面Debug技巧不足導致的問題非常多。

並不是每一個開發者都知道他眼前早就有一個非常強大的Debugger，可以幫助他追蹤和消除bug。這個Debugger就是他自己的谷歌瀏覽器。在之前一篇部落格中，我主要介紹了Console。在這篇，我將專注於Elements標籤。

這篇文章將會包含：

• 將你的瀏覽器變為IDE-可動態編輯的HTML/CSS
• HTML斷點
• 改變元素狀態
• 搜尋特定的元素
• 通過例項來練習新的技巧
• 理解元素樣式

好啦，基本介紹的差不多了。接下來給你展示新的技巧。

快速進入Element標籤的兩個方法

• 對著頁面任何元素(Elements)點選右鍵，選擇“檢查”
• 使用Ctrl+Shift+I(Mac:Cmd+Opt+I)開啟開發者面板，選擇元素(Elements)標籤。

元素(Elements)標籤的左側

DOM樹

首先，DOM樹元素可以被進一步檢查(inspected)。點選左側的三角來展開檢視更多的元素。

點選滑鼠右鍵，會有更多的選擇：

• Add attribute - 對選中的元素新增新的屬性
• Edit attribute - 編輯某個屬性，當你滑鼠在某個屬性上方點選右鍵時方才顯示。
• Edit as HTML — 你可以編輯整個HTML；如果你想把元素的一部分拷貝使用，這樣操作也很方便。

Copy:

• Copy outerHTML — 將整個標籤及其內容拷貝。
• Copy selector — 拷貝CSS選擇器(div > span > #id)
• Copy XPath — 拷貝XPath //*[@id=”answer11208745–20”]/div/div[3]/time, 更多請檢視文末拓展閱讀
• Cut element — 剪下元素
• Copy element — 拷貝元素
• Hide element — 通過新增display:none來臨時性地隱藏元素；(cmd+H/Ctrl+H)
• Delete element
   — 刪除元素，可以使用cmd+z來取消刪除
• Expand all — 將所有節點展開
• Collapse all — 將所有節點摺疊
• :active — 將元素設定為active狀態*
• :hover — 將元素設定為hover狀態*
• :focus — 將元素設定為focus狀態*
• :visited — 將元素設定為已訪問狀態*
• Scroll into view — 將網頁快速滑動到元素所在位置

Break on:

• subtree modification — 在子節點被修改的時候中斷執行 **
• attribute modification — 在屬性被修改的時候中斷執行 **
• node removal **

• 在右側的樣式(styles)中檢查效果
  ** 在右側(DOM breakpoints)可以檢視設定的斷點

斷點實戰

不實戰一下，理解起來可能有點困難，特別是如果你還從未使用過它們。接下來我建立一個簡單的例子交給你來玩。

所有的步驟都在HTML檔案中。如果debugger在jQuery中中斷暫停，你可以將jQuery遮蔽(如下圖所示)。

元素快速定位

點選該圖示，然後在頁面上選中元素，DOM tree就會快速定位到該元素的原始碼位置。

原始碼

If you click on the source file like styles, fonts, js files, there will be some additional options.

如果你點選樣式(style)，fonts，js檔案，會有一些額外的選項。

捕獲節點截圖

一個很酷的技巧就是你可以將選中的節點生成一張png圖片。

• 點選滑鼠左鍵選中元素
• 使用 Cmd+Shift+P/Ctrl+Shift+P開啟命令輸入視窗
• 輸入node screenshot
• 選中 Capture node screenshot

將會生成一張PNG圖片。

通過字串、CSS選擇器、XPath快速查詢

當元素標籤開啟，輸入Cmd/Ctrl+f，將會開啟一個輸入視窗。

直接編輯原始檔

在Chrome開發者面板可以直接編輯原始檔並儲存，不用重新整理頁面。

• 開啟source標籤，選中並開啟你想要編輯的檔案並編輯
• 然後右鍵，如上圖所示
• 在Windows下，你可以點選整個資料夾(左側藍色的圖示)，然後選擇Add folder to workspace
• 在MacOS下，你可以將整個資料夾拖動到你本地的目錄。你也可以右鍵選擇Add folder to workspace
• 接下來你所有的更改都會自動反應到對應的原生代碼。

Fundebug是可以復現使用者行為的JavaScript錯誤監控平臺，支援各種框架，可以幫助您第一時間發現BUG！

元素(elements)標籤的右側區域

樣式(styles)

當你選中某個元素，對應的樣式以及其他一些屬性會在右側顯示出來。

• :hov - 當你展開:hov，其提供的選項可以讓你啟用元素的不同狀態，比如hover, focus。在DOM tree上也可以直接對元素進行這樣的操作。
• .cls - 對選中的元素新增class
• + - 新增新的style到該元素

在Styles標籤，你可以找到對應元素適配的所有的style。

一些標記的含義

黃色的警告標識表面樣式的名字或則值格式不正確。比如上圖widd是一個錯誤的屬性名。

被劃掉意味著被其它樣式覆蓋，比如另一個樣式使用了important關鍵字。

灰色背景的樣式檔案是有效但不可編輯。這些樣式檔案來自於瀏覽器。

右側有該樣式所在的檔案，點選即可檢視該檔案。

樣式的計算結果(Computed Styles)

最上方的矩形框視覺化地展示了padding, border和margin的效果以及其值。

對於非靜態定位的元素，top、right、bottom、left屬性會顯示出來。所有的值都可以左鍵雙擊，然後修改。

下面是所有適用的樣式規則。每一條都可以展開檢視，並且右側有對應的原檔案的位置。

所有計算好的樣式不可編輯，不過你可以點選灰色的箭頭進入對應的樣式來進行編輯。

Event Listeners

在該標籤頁可以看到所有的事件監聽函式。

• 位於左側的重新整理按鈕 —  重新整理所有監聽事件
• 父元素(Ancestors)選擇框 — 顯示/隱藏所有元素的父元素的監聽函式

All/Blocking/Passive下拉選單，你可以選擇一個:

• Passive events listeners — 一個新的web標準，在Chrome51釋出的新特性，可以提升滑動的效能。Chrome Release Notes
• Blocking — 典型的那些過時的事件監聽.
• Framework listeners — 檢車來自框架的事件監聽。當選中後，我們看到的jQuery不再是一個連線，而是具體函式呼叫的位置。

每天使用

當你在閱讀不熟悉的程式碼的時候，事件監聽標籤非常有用。它幫助你快速定位該函式繫結到哪個元素。”Show function definition”可以跳轉到函式的定義。

如果你使用for迴圈來新增元素，可能你不小心把多個事件繫結到同一個元素。那麼通過檢視事件監聽可以幫你發現這個bug。

記得選中Framework listeners來檢視具體的繫結，而不是抽象的jQuery。Fiddle示例

屬性

每一個被選中的HTL元素都是一個DOM物件。它具有相應的屬性。屬性標籤顯示選中的DOM物件的繼承結構。

老實說，我並不怎麼使用這個功能。我主要的使用場景是檢視元素的屬性，而不是使用console.log以及重新載入和重新整理。如果你有什麼更好地說那個場景，不妨分享一下。

Shapes and $scope

Shapes和$scope是額外的標籤來自Chrome的外掛。在接下來的文章我會詳細介紹。

結束語

如果你想知道更多，可以檢視命令選單(Command Menu)，或則拓展閱讀。

拓展閱讀

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了8億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！

您的使用者遇到BUG了嗎？