下面小編就為大家介紹一下IE插件DebugBar中文版如何安裝及使用的。

一、DebugBar插件簡介：

DebugBar是功能強的IE插件,類似于Firefox瀏覽器的一款開發類插件Firebug.從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利.

目前對于個人用戶免費.企業用戶收費.

主要有以下功能:

1.查看網頁DOM樹,HTTP(S),網頁javascript腳本函數歸類展示.效驗網頁中的框架.網頁屬性的詳細信息。

2.提供網頁源碼與IE整理后代碼的對比。

3.能在無需改變顯示器分辨率的前提下用不同分辨率顯示頁面.并能對頁面進行縮放。

4.功能對任意位置取色并將HEX碼復制到剪貼板中便于保存。

5.可將當前頁面截圖通過郵箱發送出去。

二、DebugBar插件的下載與安裝：

1、下載插件，下載地址：http://www.survivalescaperooms.com/softs/99012.html。

2、下載完成后解壓到任意位置，雙擊開始安裝，如下圖所示：

圖一：安裝貼圖（1）

圖二：安裝貼圖（2）

圖三：選擇安裝位置

三、DebugBar插件的使用圖文說明：

PS：實驗工具 IE6.0，實驗網站 護衛神 http://www.survivalescaperooms.com/。

1、 如何在瀏覽器上啟用DebugBar插件：打開IE6，依次點擊【查看】-【工具欄】-【DebugBar】，就OK啦。

圖四：啟用瀏覽器的DebugBar插件

2、 查看網頁的DOM詳情：點擊DebugBar v5.4.1插件欄中的DOM選項卡，利用這個選項我們可以很詳細的了解該網頁的結構，很適合編程新手們學習和研究。

1） 文檔標簽：查看文檔標簽信息我們可以很清晰的看到網站的代碼布局，主要分為head和body兩大類

圖五：查看頁面的源代碼

2） 鏈接標簽：在這里我們可以看到網站使用的所有超鏈接及代碼。

圖六：查看頁面超鏈接

3） 圖像標簽：查看這個標簽我們可已經很清晰的看到網站中那些部分是插入的圖片，由于某些網站他看似是一張圖片，可能是自己設置的樣式也可能是javascript代碼編寫成的，利用這個選項就可以很清晰的分辨出來。

圖七：查看頁面圖片信息

4） 表單標簽：利用表單標簽我們可以查看到網頁中所有的表單，以護衛神網站為例如下圖所示：

圖八：查看頁面表單信息

5） 樣式表標簽：編程人員都知道，我們一般在編寫網頁的時候都會使用CSS樣式表，這樣可以使代碼更整潔和編寫代碼更方便，如下圖所示，護衛神網站的CSS樣式表已一覽無余啦。

圖九：查看頁面CSS樣式表

3、 一般為了網頁實現更多的功能，我們就會在網頁中加入函數等等腳本，如果你想查看的話，點擊腳本選項，就可以清晰查看到了。

圖十：查看腳本信息

4、HTMLCheck選項的使用：其實這個選項特別適合編程人員調試網站的時候使用，利用它可以看到該網頁出現的錯誤及警告詳情。

圖十一：查看網頁中的警告和錯誤

5、最后一個選項是信息，他是對網頁信息做一個匯總，包括有頁面地址、編碼、協議等等信息。

圖十二：查看網頁詳細信息

DebugBar其實是一個很有意思的插件，他不僅適用有編程高手們直接在網頁中調試查看代碼，也方便與編程新人們學習借鑒，趕快大家都下載一個使用研究吧！