《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,微软还有待努力。

相关文章
|
JavaScript 前端开发 Java
虽然IE已G,但是他的对JavaScript的更新却做出了很大的贡献
虽然IE已G,但是他的对JavaScript的更新却做出了很大的贡献
33 0
|
前端开发 JavaScript API
javascript 的File对象在IE中不支持
业务中有一段涉及到处理canvas的图片然后将内容进行上传,后测试发现在IE中不好使哎...
javascript 的File对象在IE中不支持
|
JavaScript 前端开发
在IE环境下用javascript触发ABAP event
在IE环境下用javascript触发ABAP event
在IE环境下用javascript触发ABAP event
|
Web App开发 JavaScript 开发者
IE不打开F12开发人员工具无法执行js问题
本文目录 1. 问题表现 2. 问题原因 3. 解决方案
238 0
|
JavaScript
JS 判断是否是 IE浏览器 以及 IE的版本
JS 判断是否是 IE浏览器 以及 IE的版本
1490 0
|
JavaScript 前端开发 索引
|
Web App开发 JavaScript iOS开发
[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
原文:[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器 截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断。
4824 0
|
Web App开发 JavaScript 前端开发
推荐文章
更多