目前市面上比较火爆的浏览器内核提供商,有微软的IE、mozilla的firefox、谷歌的chrome、苹果的safari。IE浏览器下的项目过去占比非常大,近年随着其他浏览器厂商发展势头迅猛,过去的项目要求在其他浏览器下也能兼容,势必引起一场兼容测试风暴。

而今天,笔者向大家介绍一下IE浏览器下的web调试工具,帮助大家了解web测试工具的使用。

IE WebDeveloper(官网)

IE WebDeveloper可以让你检查和编辑你的HTML DOM, 显示错误信息, 日志信息, 显示网站源代码, 监视DHTML事件和HTTP流量. 如果你是一个开发人员或设计人员, 但平常又喜欢使用IE, 那IE webdeveloper是个不错的选择.它的功能可以和火狐下的Firebug相媲美,甚至有些功能还强于Firebug。

IE WebDeveloper允许直接地在浏览器窗口中浏览、传输和更新HTML DOM。该软件可以实时分析网页并且显示为一种允许你察看表格风格、Javascript脚本,表格以及其它网页元素的树形风格。该软件还可以在浏览器中 交互式地突出显示被选择的网页元素,因此你可以在实际网页中定位其代码。 查看style元素,定位div等等。且支持一键w3c检查(包括HTML/XHTML/CSS/Javascript tutorial等)。虽然用起来不如Firebug那么得心应手,但是毕竟解决了我们在ie上调试工具不足的问题。

程序安装后是IE的一个内嵌插件,找到“菜单栏”->“IE WebDeveloper V2”,点击“IE WebDeveloper V2”出现如下效果表示安装成功:

1、Webpage Inspector--DOM查看器

点开后就能使用IE WebDeveloper了。IE WebDeveloper有五个主窗口,首先是Webpage Inspector。Webpage Inspector左边是DOM查看器,选择一个DOM节点会在右侧对应地显示其属性值、HTML代码和CSS样式列表。在Webpage Inspector中可以动态地修改DOM结点,IE窗口会实时渲染展示出修改后的结果。(Firebug也有此功能)

2、Script Console--js控制台

第二个为Script Console,这个窗口可以输出页面的一些信息,如错误信息,还能寻址到出错代码的位置。可以在Javascript代码中用console.log('信息')来输出信息了,比alert命令好用多了。还可以直接在里面输入命令进行调试。(Firebug也有此功能)

3、Source Explorer--源码查看器

第三个为Source Explorer,查看当前页所用到CSS和Javascript文件以及HTML源代码,它能够列出Javascript文件中的函数和变量名称。

4、Event Log--事件触发查看器

第四个为Event Log,它能够查看网页浏览器、HTML文档、HTML窗口或所选HTML元素结点的事件触发列表。

5、HTTP Monitor--查看HTTP交换信息

最后一个为HTTP Monitor,它可以查看和网络服务器相交互的HTTP信息,相当于Firebug的网络(net)功能,对于AJAX开发很有帮助。

另外,IE下的调试工具还有IE Developer Toolbar和Companion.JS,两个工具也还算不错。

IE WebDeveloper--IE浏览器web调试工具的更多相关文章

  1. IE浏览器下web调试工具之--IE WebDeveloper介绍

    做Web项目的架构设计.开发.测试,免不了要熟悉Web页面调试工具,以此来获知哪些浏览器支持Web页面的显示,哪些浏览器下显示有问题. 目前市面上比较火爆的浏览器内核提供商,有微软的IE.mozill ...

  2. Mobile Web调试工具Weinre (reproduce)

    Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而 ...

  3. Web调试工具——Fiddler介绍

    Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...

  4. web调试工具

    Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...

  5. Fiddler是最强大最好用的Web调试工具

    Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...

  6. (转)Fiddler教程(Web调试工具)

    转载地址:写得很不错的fildder教程   http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.c ...

  7. Fiddler是最强大最好用的Web调试工具之一--网站抓包分析

    Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...

  8. Fiddler教程(Web调试工具)

    转载地址:写得很不错的fildder教程   http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.c ...

  9. 浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools

    来源:GBin1.com 如果你是一个前端开发人员的话,正确的了解和使用浏览器开发工具是一个必须的技能. Secrets of the Browser Developer Tools是一个帮助大家了解 ...

随机推荐

  1. Hibernate One-to-One Mappings 一对一关系映射

    Hibernate One-to-One Mappings 一对一关系映射 关键:一对一关系映射和多对一关系映射非常像.仅仅是unique 属性值为 true 样例:一个员工仅仅能有一个地址. Hib ...

  2. FileStream读写文件

    读文件示例 try { // 打开文件 FileStream fs = new FileStream("D:\\not.txt", FileMode.Open, FileAcces ...

  3. 【转】无需root Android 4.4现已支持显示电量百分比

    原文网址:http://android.tgbus.com/shouji/news/201311/481145.shtml 现如今,大多数安卓设备.第三方ROM都可以在状态栏以百分比的形式精确显示剩余 ...

  4. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  5. jdk1.8新特性之lambda表达式

    lambda表达式其实就是指一个匿名函数,应用最广泛的就是匿名内部类的简化.在jdk1.8之前,我们定义一个匿名内部类可能需要写一大坨代码,现在有了lambda之后,可以写的很简洁了.但不是说lamb ...

  6. SVN checkout 出的项目在PHPstorm中打开没有subversion(SVN)选项按钮怎么办?

    对于svn add 命令的批量操作,为了操作简便还是习惯在IDE中完成,有时候新checkout出的项目,在PHPstorm中右键菜单中没有 Subversion 按钮,操作如下: 点击VCS按钮,然 ...

  7. pandas之Dataframe转成dict+过滤+index去重

    转成字典a = ['key1', 'key2', 'key3']b = ['1', '2', '3']data = pd.DataFrame(zip(a, b), columns=['project' ...

  8. (转)将rdlc报表作为资源嵌套使用

    本文转载自:http://www.cnblogs.com/chenxizhang/archive/2009/05/16/1458469.html 如果我们准备在Windows Forms里面使用rdl ...

  9. Struts2.0 xml文件的配置(package,namespace,action)

    struts.xml配置 struts.xml文件是整个Struts2框架的核心. struts.xml文件内定义了Struts2的系列Action,定义Action时,指定该Action的实现类,并 ...

  10. asterisk配置SIP服务器

    服务器asterisk我们安装完以后,需要在windows(就是自己的本机)上在安装一个客户端xlite,直接下载安装就行,安装完以后,我们就需要自己手动配置一下sip服务器了. 下面给大家讲一下怎么 ...