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

一、DebugBar插件簡介：

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

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

主要有以下功能:

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

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

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

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

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

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

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

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

圖一：安裝貼圖（1）

圖二：安裝貼圖（2）

圖三：選擇安裝位置

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

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

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

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

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

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

圖五：查看頁面的源代碼

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

圖六：查看頁面超鏈接

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