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

来源:http://www.sh-fengwen.com 作者: 营养排行 人气:119 发布时间:2019-09-04
摘要:相信很多人都遇到过以下几个问题: 为了调整页面某个元素的宽度或高度到最适合值,在ide中修改css或者html再刷新浏览器,重复上述修改步骤不下20次; 为了修改html,先在ide修改后在刷

相信很多人都遇到过以下几个问题:
为了调整页面某个元素的宽度或高度到最适合值,在ide中修改css或者html再刷新浏览器,重复上述修改步骤不下20次;
为了修改html,先在ide修改后在刷新浏览器,重复上面步骤不下10次。
为了得到javascript执行中的某个变量在javascript中调用很多次alert函数;
为了监控mouse事件,创建一个div,通过javascript在div中写一些html;
更多更多的问题...
如果你遇到过上面的问题,那么本文能帮你解决上述所有的问题,从而使你将更多的精力投入到其他工作中。
本文中分为3部分,第一部分:调试工具介绍,详细介绍了当前流行的各种浏览器的调试工具;第二部分:firebug的使用;第三部分:ie调试工具的使用。
 
如果需要解决上述问题,那么我们不得不介绍我们的主角firebug (主页 )。firebug是火狐(firefox) 浏览器的最为强大、使用最为广泛的一款开发插件。
firebug安装(firefox浏览器)
在firefox中打开
 
firebuglite安装(非firefox浏览器)
firebug也可用在其他浏览器中(如:IE6+, Firefox, Opera, Safari and Chrome)。

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

使用非常简单,下载Firebug Lite 当前最新版本为1.3。在需要调试的页面的head中加入:
Js代码 
<script type="text/javascript" src="/local/path/to/firebug-lite.js"></script> 
 
firebug启用及界面介绍
火狐中在页面任意地方,右键,在弹出的菜单中选择“查看元素”;或者在右下角附加工具栏中也能找到firebug的启动按钮。

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

图片 1

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

火狐中firebug界面:

IE WebDeveloper

图片 2

其官方网站为:

firebuglite在IE下的界面:

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

 图片 3
其他的调试工具:
Firefox, Opera, Safari 和Chrome 厂家都提供自家的web调试工具,和firebug界面及操作方式大同小异,这里不再做特别的说明。
IE也有自己的调试工具IEWebDeveloper,不过功能相对而言弱了很多,在ie6,7需要独立安装,而在ie8和ie9被整合经来,叫做“开发人员工具”。当页面被刷新后,需要人工手动的点击第4个按钮刷新。

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

图片 4

程序安装后是IE的一个内嵌插件,在IE工具条上默认会有一个打开按钮:图片 5

作者“原创专业的博客,分享自己点滴”  

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

: 为了调整页面某个元素的宽度或高度到最适合值,在ide中修改css或者html再刷新浏览器,重复上述修改步...

图片 6

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

本文由美高梅游戏平台网站发布于 营养排行,转载请注明出处:IE浏览器下web调试工具之--IE WebDeveloper介绍

关键词:

上一篇:escape,encodeURI,encodeURIComponent的使用方法

下一篇:没有了

最火资讯