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

一、DebugBar插件簡介：

DebugBar是功能強(qiáng)的IE插件,類似于Firefox瀏覽器的一款開發(fā)類插件Firebug.從各個不同的角度剖析Web頁面內(nèi)部的細(xì)節(jié)層面，給Web開發(fā)者帶來很大的便利.

目前對于個人用戶免費(fèi).企業(yè)用戶收費(fèi).

主要有以下功能:

1.查看網(wǎng)頁DOM樹,HTTP(S),網(wǎng)頁javascript腳本函數(shù)歸類展示.效驗(yàn)網(wǎng)頁中的框架.網(wǎng)頁屬性的詳細(xì)信息。

2.提供網(wǎng)頁源碼與IE整理后代碼的對比。

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

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

5.可將當(dāng)前頁面截圖通過郵箱發(fā)送出去。

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

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

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

圖一：安裝貼圖（1）

圖二：安裝貼圖（2）

圖三：選擇安裝位置

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

PS：實(shí)驗(yàn)工具 IE6.0，實(shí)驗(yàn)網(wǎng)站 護(hù)衛(wèi)神 http://www.survivalescaperooms.com/。

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

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

2、 查看網(wǎng)頁的DOM詳情：點(diǎn)擊DebugBar v5.4.1插件欄中的DOM選項(xiàng)卡，利用這個選項(xiàng)我們可以很詳細(xì)的了解該網(wǎng)頁的結(jié)構(gòu)，很適合編程新手們學(xué)習(xí)和研究。

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

圖五：查看頁面的源代碼

2） 鏈接標(biāo)簽：在這里我們可以看到網(wǎng)站使用的所有超鏈接及代碼。

圖六：查看頁面超鏈接

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