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


    做Web项目的架构设计、开发、测试,免不了要熟悉Web页面调试工具,以此来获知哪些浏览器支持Web页面的显示,哪些浏览器下显示有问题。


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


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


    IE WebDeveloper


    其官方网站为:http://www.ieinspector.com/dominspector/

    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工具条上默认会有一个打开按钮:


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


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


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


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


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


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


    相关资料:

    http://gaohaixian.blog.163.com/blog/static/1232601052011426553396/

    http://www.cr173.com/html/11966_1.html



  • 相关阅读:
    四种常见系统架构介绍
    NC-UAP客户化开发-数据建模
    NC-UAP客户化开发-4.NC数据库持久化技术
    NC-UAP客户化开发-NC基础技术
    NC-UAP客户化开发-开发环境搭建
    Docker: 使用socket 代理
    Disk:磁盘管理之LVM和系统磁盘扩容
    Grafana & Graphite & Collectd:监控系统
    ELK:收集k8s容器日志最佳实践
    Virus:病毒查杀
  • 原文地址:https://www.cnblogs.com/james1207/p/3313346.html
Copyright © 2020-2023  润新知