本節書摘來自異步社群《jquery與javascript入門經典》一書中的第2章，第2.2節，作者：【美】brad dayley著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
調試html元素有時候很困難。浏覽器渲染html文檔時，簡單的文法錯誤都可能導緻嚴重的問題。另外，html元素的有些屬性不影響網頁的外觀，但會影響網頁的行為。
html檢查器（inspector）和dom編輯器可幫助您找出并修複html代碼中的問題。下面通過一些簡單的示例示範如何使用這些工具。
2.2.1 檢視html元素
html檢查器讓您能夠檢視浏覽器分析的每個html元素，這讓您能夠從浏覽器的角度審視html，讓文法錯誤更為明顯。
圖2.5顯示了firebug的html檢查器。html檢查器提供了一些很有用的功能。
dom樹：這是一個非常簡單的dom樹視圖。您可單擊+圖示來展開dom樹的各個部分，還可單擊-圖示将dom樹的各個部分折疊起來。
在 dom 改變時中斷：如果啟用了該選項，浏覽器将在 dom 元素被修改時中斷javascript調試器。這有助于您實時地捕獲發生的問題。
編輯：啟用該選項後，樹視圖将切換到文本編輯器視圖，讓您能夠直接在浏覽器中編輯html代碼。浏覽器将根據您所做的修改調整渲染結果。雖然這不會修改項目中的代碼，但使用這項功能嘗試不同的修改要容易得多。将問題修複後，您可複制編輯器中的代碼，再将其粘貼到項目檔案中。
滑鼠指向時呈高亮顯示：将滑鼠指向dom樹中的html代碼時，浏覽器中的相應元素将呈高亮顯示。這是我最喜歡的html檢查器功能之一，因為它提供了很好的視覺線索，讓我知道dom樹節點與渲染的網頁元素之間的關系。在圖2.5中，我将滑鼠指向了< h1 >元素，而網頁中的标題呈高亮顯示。
注意：将滑鼠指向dom樹中的元素時，該元素将在網頁中呈高亮顯示：html元素的内容為淡藍色、内邊距為紫色、外邊距為黃色。
面包條：面包條顯示了節點層次結構—從根節點< html >到目前選擇的節點。這讓您能夠輕松地導航，尤其是處于編輯視圖時。
使用html檢查器調試html
下面使用程式清單 2.2 所示的代碼來示範如何使用 html 檢查器。這是一個基本的html文檔，包含一個電影清單和一個标題，并要以斜體方式顯示标題中的favorite。然而，從圖2.6所示的渲染結果可知顯然存在一些問題：所有内容都為斜體，而第一個清單項沒有項目符号。這些問題都是由兩個字元導緻的。
程式清單2.2 一個非常簡單的html文檔，其中存在一些html文法錯誤，如圖2.6所示
請使用html檢查器按如下步驟找出并修複html文法錯誤。
在項目的檔案夾hour02中，建立檔案hour0202.html，在其中輸入程式清單2.2所示的代碼，再儲存這個文檔。現在您應該能夠熟練地完成這個過程。
啟動firefox，并單擊firebug圖示以啟用firebug。
在firefox中輸入下面的url，網頁将類似于圖2.6所示。
單擊firebug中的标簽html，再依次展開标簽< html >、< body >和< i >，如圖2.7所示。注意到在标簽< i >下，唯一的元素是另一個标簽< i >。這不對，是以回到aptana并檢視第7行的标簽 < i >。注意到結束标簽< i >缺少/。
将第二個< i >标簽改為結束标簽< /i >，再儲存文檔。
在浏覽器中重新整理網頁，注意到現在隻有單詞favorite為斜體了，但第一個清單項還是沒有清單符号，如圖2.8所示。
在html檢查器中，依次展開标簽< html >、< body >、< ul >和< ll >，如圖2.9所示。在元素< ul >下，包含的不是4個< li >元素，而是一個< ll >元素，其中又包含< li >元素。本書還未介紹html标簽，但如果您熟悉html清單，就知道ll不是合法的html标簽，它應為< li >。
回到aptana，将第9行的< ll >改為< li >并儲存文檔。
在浏覽器中重新整理網頁，網頁将正确地顯示，如圖2.10所示。
2.2.2 檢視和編輯dom
調試html時，另一個重要的工具是dom檢查器。dom檢查器功能極其強大，讓您能夠檢視dom中每個html元素的特性（attribute）、屬性、函數、子節點、父節點等一切。資訊是以樹視圖的方式顯示的，讓您能夠展開和折疊各個編組。
可通過兩種方式通路dom檢查器：單擊firebug中的dom标簽；檢視html時單擊html檢查器中的dom标簽。
圖2.11顯示的是主dom檢查器。在主dom檢查器中，可通路有關浏覽器環境的各種資訊。例如，在圖2.11中，展開了window對象的screen特性，這讓您能夠看到浏覽器視窗的可用尺寸和實際尺寸。
通常，在html檢查器中打開dom檢查器是更佳的選擇，如圖2.12所示。使用html檢查器中的dom頁籤時，隻能看到目前標明的html元素的dom。這減少了顯示的資訊量；另外，還可在浏覽器中快速修改html元素的特性值，讓調試和開發工作容易得多。
在dom檢查器中編輯html元素的值
例如，可按如下步驟修改前述示例中html元素的值。
在firefox中顯示檔案hour0202.html，并啟用firebug。
單擊firebug中的标簽html。
依次展開節點< html >、< body>和< ul>。
選擇第一個< li>節點。
單擊右邊的dom标簽，如圖2.12所示。
在dom檢查器中，向下滾動到節點firstchild并展開它，這是一個< textnode>元素。
輕按兩下特性data右邊的值，并按圖2.12那樣修改文本。注意到網頁中渲染的html元素也變了。操縱html節點的可編輯特性就這麼簡單。