IE插件DebugBar安装及使用方法

下面小编就为大家介绍一下IE插件DebugBar中文版如何安装及使用的。

一、DebugBar插件简介：

DebugBar是功能强的IE插件,类似于Firefox浏览器的一款开发类插件Firebug.从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利.

目前对于个人用户免费.企业用户收费.

主要有以下功能:

1.查看网页DOM树,HTTP(S),网页javascript脚本函数归类展示.效验网页中的框架.网页属性的详细信息。

2.提供网页源码与IE整理后代码的对比。

3.能在无需改变显示器分辨率的前提下用不同分辨率显示页面.并能对页面进行缩放。

4.功能对任意位置取色并将HEX码复制到剪贴板中便于保存。

5.可将当前页面截图通过邮箱发送出去。

二、DebugBar插件的下载与安装：

1、下载插件，下载地址：https://www.jb51.net/softs/99012.html。

2、下载完成后解压到任意位置，双击开始安装，如下图所示：

图一：安装贴图（1）

图二：安装贴图（2）

图三：选择安装位置

三、DebugBar插件的使用图文说明：

PS：实验工具 IE6.0，实验网站 护卫神 https://www.jb51.net/。

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其实是一个很有意思的插件，他不仅适用有编程高手们直接在网页中调试查看代码，也方便与编程新人们学习借鉴，赶快大家都下载一个使用研究吧！

最新评论