debugbar插件是一款專業的前端調試工具，主要功能包括分析dom、http請求、查看JS腳本、html驗證等，還支持截圖和取色，是web前端開發的好幫手，有需要的朋友可以下載！

軟件功能

1.DOM：

DebugBar可以分析出所有的DOM，包括圖片，樣式，腳本等等，

我們可以通過拖動目標工具到頁面中尋找需要的目標元素，

然後就可以在左下角的窗口中看到，源碼，樣式等代碼，還有該元素的盒子模型;唯一一點不足是不能像firebug一樣直接修改css，調整頁面。

2.http請求

DebugBar可以分析出所有http請求，還能抓出圖片等一些404錯誤文件;

3.查看JS腳本

DebugBar還能將js中的函數都列出來，

5.html驗證：

DebugBar還能驗證html，

6.IE下的DebugBar插件

DebugBar本來就是爲ie開發的插件，在IE下DebugBar多了個工具條，安裝後在ie7或者ie8下首先要打開這個工具條，“查看”-“工具欄”-“DebugBar”;

debugbar插件安裝教程

1、双击安装文件，进入如图界面，阅读许可协议，勾选“I agree”

2、選擇安裝組件

3、選擇安裝位置，想修改點browse，之後點“install”

4、安裝完成

debugbar插件使用教程

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、最後一個選項是信息，他是對網頁信息做一個彙總，包括有頁面地址、編碼、協議等等信息。

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