开发者社区> 华章计算机> 正文

《Ext JS权威指南》——3.2节在IE中调试

简介: 本节书摘来自华章社区《Ext JS权威指南》一书中的第3章,第3.2节在IE中调试,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看
+关注继续查看

3.2 在IE中调试
在IE 8之前,在IE中的调试就只有可怜的alert命令了,虽然可以在Visual Studio中进行调试,但太麻烦了。Firebug Lite虽然也发布了支持IE的版本,但是需要在页面中加入Firebug Lite的脚本文件才行,而且在Firebug中的很多功能不能用。就目前来说,做得比较好的还是Debugbar工具,不过与Firebug比起来还是有很大的差距。
3.2.1 使用Debugbar和Companion.js调试
1.介绍
Debugbar虽然可以与Firebug一样获取页面元素、做源代码调试和CSS调试,可惜功能实在有限,只不过是聊胜于无而已。例如,如果要做类似Firebug那样的源代码调试,还需要使用Companion.js文件,而Companion.js是从Firebug Lite扩展出来的,所以功能还是有限的。
要注意,Debugbar对个人用户是免费的,而对商业用户是收费的。
2.安装
访问http://www.my-debugbar.com/wiki/,可下载Debugbar和Companion.js的安装程序。
首先安装Debugbar,运行下载的install-debugbar-v5.4.1.exe文件,将看到如图3-27所示的安装界面。


31277fd73e1784c0240cb8b275965689a0750f6c


04b1c331129334492248f4d1b482f8ba6399e361

单击“Install”按钮开始安装,安装完成后会弹出一个IE窗口。
现在安装Companion.js,运行下载的install-companionjs-v0.5.5.exe文件,将看到如图3-30所示的窗口。
单击“Next”按钮进入如图3-31所示的安装目录选择窗口。
单击“Install”按钮开始安装。等待出现了如图3-32所示的安装完成窗口,则单击“Close”按钮结束安装。


6602979c59ad0367706912abb72f3e25a85d400b

现在软件安装完了,可以使用了。
3.使用
要在IE中开启脚本调试,首先要在“Internet选项”的高级选项中将“禁用脚本调试(Internet Explorer)”和“禁用脚本调试(其他)”两个选项的勾去掉,如图3-33所示。
接着在IE工具栏里单击鼠标右键,在右键菜单中选择Debugbar,打开Debugbar工具栏。在IE的查看菜单中打开浏览器栏的子菜单,然后选择“Companion.js”可打开“Companion.js”窗口,最终结果如图3-34所示。


62a46dbbcabb355cd84d05976551bde84d040c93

如图3-35所示,在DOM选项卡中可查看页面的DOM节点。选择一个DOM节点后,可在下面的窗口查看节点的源代码(Source)、样式(Style)、计算出的样式(Comp. Style)、布局(Layout)和属性(Attrs)。通过拖动DOM标签下的图标可在页面中选取元素。除了在属性窗口内可以修改属性值外,其余地方不允许进行任何修改,可以说基本不具备任何HTML和CSS调试功能。


1fa53a7b184f812528bc808d1ea7b69fbc3a527c

HTTP(S)标签有点类似Firebug的网络面板,不过不太直观。脚本标签内不具备Firebug那样的单步调试功能,只是兼容了Firebug的调试语句。HTML Check标签是进行HTML验证时用的。
信息标签显示的是页面的URL、标题、页面大小、下载事件等信息。
总体来说,Debugbar和Companion.js只能作为当Firefox中没有错误,而在IE中有错误时的辅助调试工具,主要调试工具还是应该使用Firebug。
3.2.2 使用IEtester测试
感谢Debugbar公司提供了IEtester这款工具,使用它就可以在一个软件内调试页面而在不同IE版本中显示结果了。
要使用IEtester,请首先访问http://www.my-debugbar.com/wiki/下载安装文件install-ietester-v0.4.8.exe,然后运行该安装文件,将看到如图3-36所示的安装窗口。


a291311940452339d8b75a3ad70f01454d289df6

单击“Next”按钮进入如图3-38所示的安装目录选择窗口。
单击“Instal”按钮开始安装软件,安装完成后会在桌面看到一个IEtester的快捷方式,双击该快捷方式打开如图3-39所示的IEtester窗口。
因为Windows XP不支持IE 9,所以在图3-39中,IE 9的图标是灰色不可选择的。要在IE 9中调试,还是要安装Vista或Win 7。
单击工具栏中各版本IE的按钮就可在标签中添加一个该版本的IE标签,例如,单击IE 6按钮,就会看到标签栏中多了一个如图3-40所示的标签页,标签的图标表示正在使用的IE版本。


e5ad1fe7cad5fddd5a3a4e5bed68f16b1ac79215

在一个系统内使用不同版本IE的引擎的原理很简单,IE的引擎其实就是一些动态链接库(DLL),只要使用对应的动态链接库打开页面就相当于使用不同版本的IE打开页面。不过,这样存在兼容性问题,IEtester时不时会崩溃。但问题不大,关键是能解决大问题。不然,你就需要安装多个虚拟机,然后在不同虚拟机上安装不同的IE进行调试了。
3.2.3 在IE 8或IE 9中调试
浏览器大战的压力让微软坐不住了,由于越来越多的开发者选择了Firefox和Firebug,微软终于在IE 8中加入了调试工具。和Firebug一样,在IE 8按下F12可在浏览器中打开如图3-41所示的调试窗口。而在IE 9中,调试窗口会如图3-42所示。


509b5866cdd5f62a836a49b078fa59f027928567

对比一下IE 8和IE 9,会发现多了控制台、网络两个标签页,IE 8的控制台是作为脚本标签页的一个附加功能使用的。不过两个版本的调试工具都没有DOM查看器,其余的在外观上与Firebug差不多。
在HTML标签下,可看到页面的源代码,不过要单击工具栏的刷新按钮才可查看最终的源代码。HTML标签中的功能和Firebug差不多,比Debugbar强,但就是微软风格太强烈。
单击标签下的箭头图标可以在页面中选择元素。在HTML标签和CSS标签的工具栏里都有一个“保存”按钮,可以保存修改,这在Firebug中需要通过附加扩展才能做。
在控制台中直接输入对象名,例如输入window,可查看对象的部分信息,很大一部分信息使用省略号省略了。估计这是因为没有DOM面板造成的。至于为什么不提供DOM面板,笔者也实在想不明白。
脚本调试有个怪异的地方就是单击“启动调试”按钮后,必须将内嵌窗口变成独立窗口调试,而且只能开一个一个页面进行调试。不过,这也足够了。
探查器标签和Firebug控制台中的JavaScript执行时间概括功能相同,用来探查脚本的运行。
在IE 9中添加了网络标签,功能与Firebug的网络面板差不多。不过没有Firebug那么直观。
IE的调试工具中还有个特殊功能,就是可以选择浏览器的模式,功能类似IEtester,但不支持IE 6。
总体来说,IE自身的调试工具不如Firebug,微软还有待努力。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
13765 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24814 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18010 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14683 0
《Ext JS权威指南》——3.5节调试技巧
本节书摘来自华章社区《Ext JS权威指南》一书中的第3章,第3.5节调试技巧,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看
1187 0
《Ext JS权威指南》——3.2节在IE中调试
本节书摘来自华章社区《Ext JS权威指南》一书中的第3章,第3.2节在IE中调试,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看
1083 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载