IE6-7下的调试利器-IE WebDeveloper使用教程

IE WebDeveloper一款用于IE浏览器的插件，允许直接地在浏览器窗口中检查、编辑HTML DOM，查看网页元素树形结构和元素样式，调试JavaScript脚本，监听DHTML事件和HTTP请求数量等。主要用于版本较低的IE浏览器，如：IE6，IE7。

一、概述

系统需求：

  • 操作系统：window9x+、window200+、vista、window7等常用操作系统。
  • Internet Explorer 5.5 或更高级别的IE浏览器
    下载地址：IE WebDeveloper V2

二、安装步骤

IE WebDeveloper的安装非常地简单，你只需简单地点击“下一步”即可，如下图：

1.png

点击“next”。

2.png

选择“接受协议”。

3.png

选择安装路径，一路next。

4.png

你可能还没反应过来，不错，它确实已经安装完成了，就这么简单。

三、使用 IE WebDeveloper

1、启动IE WebDeveloper

一旦你安装了IE WebDeveloper，它现在就可以在浏览器窗口的下部窗格中显示了。你可以使用Internet Explorer工具栏按钮来显示或隐藏的IE WebDeveloper。

打开浏览器，在IE菜单栏中会存在其图标，点击即可执行。

5.png

如果不存在该图标你可以选择”查看->浏览器栏->IE WebDeveloper V2”，点击即可了。

6.png

如果你更想让IE WebDeveloper的图标在浏览器的工具栏上显示，你可以选择“查看->工具栏->自定义”，将其图标添加至右侧当前工具栏按钮窗口即可，如下图所示：

7.png

IE WebDeveloper运行界面如下图所示：

8.png

(运行效果图)

2、面板介绍

  • Webpage Inspector(页面查看器)
    9.png

(效果图)

你可以在浏览器窗口中进行查看DOM元素结构、而且你还可以进行动态编辑，页面效果会实时渲染出来，其功能包括：

树形结构浏览
树形结构视图显示了全面的网页结构信息。它显示了表单，meta标签，链接，图像，脚本，样式表，applet，XML，Applet/ActiveX对象的详细信息。

10.png

  • HTML DOM查看
    可直接在浏览器窗口中进行HTML DOM查看，遍历，甚至动态更新。

11.png

12.png

样式表
允许您跟踪各种样式表，如链接进来的样式表，嵌入式样式表，导入的样式表等。

13.png

检查HTML DOM元素
检查HTML DOM元素，并通过在网页上点击的获取HTML DOM元素节点全称。通过ID /名称，标签名称/类或属性的文本搜索特定元素。

各种查看功能
DOM节点，Document对象，表单，链接，框架……

网页验证
提供在线验证W3C HTML, HTML Tidy, CSS, Feed, Links, WAI, Section 508 和 P3P，还可以验证本地的HTML , CSS文件。

各种在线工具
域名注册网站查询，ping，路由跟踪，DNS，网站信息，IP信息，网页速度测试等

源代码查看
查看网页HTML源代码。

  • Script Console(脚本控制台)
    14.png

(效果图)

使用脚本控制台可以计算表达式，获取HTML DOM对象，给变量赋值，测试比较运算符，执行数学运算。当一个JavaScript遇到脚本错误时会将错误的详细信息将输出到脚本控制台。

使用控制台，你可以定位到代码中导致错误的行。另外可以使用单行命令行来运行JavaScript代码，还可以使用“Run Script”对话框，一次执行多行脚本，如下图所示：

15.png

在开发中，可以在Javascript代码中用 console.log(‘信息’)来输出debug信息，和其他Log组件一样console对象同样也包括info，warn，log，error等方法，你可以根据需要选择使用，另外它还可以使用断言console.assertEquals来进行测试比较，其详细的API使用请参数官方地址：http://www.ieinspector.com/dominspector/consoleapi/test.html

  • Source Explorer(源码查看器)
    16.png

在这里你可以查看当前页的HTM、CSS和Javascript文件的源代码，它能够列出Javascript文件中的函数和变量名，还可以将网页源码保存成临时的html文件用于编辑和调试，用16进制方式查看源码，高亮显示JavaScript、html、css、xml等。

  • Event Log
    17.png

它能够记录网页浏览器、HTML文档、HTML窗口或用Inspect所选HTML元素结点的事件触发列表。可以在事件过滤器(Event Filter)中进行事件过滤，如下图所示：

18.png

  • HTTP Monitor
    它可以查看和网络服务器相交互的HTTP信息，相当于Firebug的网络（net）功能，可以查看http请求信息，包括请求的头信息及返回的数据等，对于AJAX开发很有帮助。

另外的附加功能如：清除浏览器缓存和Cookie、对http请求进行过滤等。

19.png

3、注册IE WebDeveloper

说到现在IE WebDeveloper的功能基本说完了，更加详细的请参考其帮助文件，安装完成后就有哦。

现在你感觉到这个软件的好处了吧，在IE6，7下它大显身手，不过，它可不是免费的哦。。。

收费？那怎么行！

提供两个KEY，大家直接注册就可无限制的用了。破解真好！

88741-1806DF295FB7CA3E
88145-1ADD6AA24F22DE00

四、相关资料

官网：http://www.ieinspector.com/

CHM帮助文件：安装IE WebDeveloper后就会有，图文并茂，不过是英文版的。