Debug前端HTML/CSS

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

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

這篇文章將會包含：

• 將你的瀏覽器變為IDE-可動態編輯的HTML/CSS
• HTML斷點
• 改變元素狀態
• 搜索特定的元素
• 通過實例來練習新的技巧
• 理解元素樣式？understanding styles in the Elements tab

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

快速進入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)，或則拓展閱讀。