《Ext JS权威指南》——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所示的安装界面。

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

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

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

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所示的安装窗口。

单击“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版本。

在一个系统内使用不同版本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所示。

对比一下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,微软还有待努力。

时间: 2024-07-30 12:34:57

《Ext JS权威指南》——3.2节在IE中调试的相关文章

《Ext JS权威指南》——1.1节学习Ext JS必需的基础知识

1.1 学习Ext JS必需的基础知识 1. JavaScript 嗯,这个还用说吗?Ext JS本来就是一个JavaScript的框架,而且使用Ext JS就需要使用JavaScript语法来开发,需要JavaScript的知识是必然的了.问题的关键是,开发人员对JavaScript知识的掌握也有深浅之分.譬如,我碰到一些开发人员,对JavaScript算是很熟悉了,但是不会JSON,不会直接使用JSON对象,在使用Ext JS的过程中,需要使用JSON对象的时候,居然是通过组装字符串的方式,

《Ext JS权威指南》——2.7节Ext JS 4语法

2.7 Ext JS 4语法 1.配置对象 Ext JS的基本语法就是使用树状的配置对象来定义界面,其格式如下: { config_options1:value1, config_options1:value2, - config_optionsn:valuen, layout:{}, items:[ {},//配置对象 {}//配置对象 - ], listeners:{ //定义事件(根据需要而定) click:function(){}, dblclick:function(){} - } }

《Ext JS权威指南》——2.5节关于Ext.BLANK_IMAGE_URL

2.5 关于Ext.BLANK_IMAGE_URL 在Ext-more.js文件中可找到BLANK_IMAGE_URL属性的默认值和定义.其默认值是: BLANK_IMAGE_URL : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' 定义是: BLANK_IMAGE_URL : (isIE6 || isIE7) ? 'http:/' + '/www.sencha.com/s

《Ext JS权威指南》——1.5节如何获得帮助

1.5 如何获得帮助学习和使用Ext JS或多或少都会遇到一时难以解决的问题,这时候就需要寻求帮助.寻求帮助的方法如下.在线API文档:笔者认为,要提高自己的编程水平,很重要的一点就是经常看和查API文档.很多初学者习惯碰到问题就去论坛或者QQ群问人,这实在不是一个好的办法,因为缺乏思考过程.笔者认为,看API绝对可以提高你解决问题和寻找解决问题的能力,因为看和找的过程就是一个学习的过程.而去问人的过程,基本是一个复制过程,至于为什么要这样?为什么会这样?完全会被忽略.新的API还包含了不少使用

《Ext JS权威指南》——2.2节配置使用Ext JS库

2.2 配置使用Ext JS库要使用Ext JS,首先要做的是将Ext JS包里的resources目录.bootstrap.js文件.ext-all.js文件和ext-all-debug.js文件复制到项目目录.接着在页面中head标记部分添加CSS和脚本文件的引用: <link rel="stylesheet" type="text/css" href="path/resources/css/ext-all.css"/> <

《Ext JS权威指南》——1.2节JSON概述

1.2 JSON概述 1.2.1 认识JSON XML虽好,可作为数据交换格式,有时会喧宾夺主,标记比数据还多,徒增流量.更重要的是,在JavaScript中处理XML实在太不便利了.而JSON,没有附加的标记,在JavaScript中可作为对象处理,因而渐渐成了目前Web开发的标准数据交互格式.JSON的英文全称是"JavaScript Object Notation",意思就是JavaScript对象表示法.它是一种基于文本的.独立于语言的轻量级数据交换格式.它来源于ECMA-26

《Ext JS权威指南》——1.4节Ext JS的开发工具的获取、安装与配置介绍

1.4 Ext JS的开发工具的获取.安装与配置介绍 1.4.1 Ext DesignerExt Designer是一个所见即所得的创建Ext JS界面的工具软件,目前版本是1.2版,支持Ext JS 3.x和4.x版本,可在http://www.sencha.com/products/designer/download/下载试用版本. 安装双击下载文件将看到如图1-6所示的语言选择窗口. 选择简体中文后,单击"OK"按钮后将看到如图1-7所示的设定窗口. 单击"前进&quo

《Ext JS权威指南》——2.9节为本书示例准备一个模板

2.9 为本书示例准备一个模板 为了便于示例的讲解,特意准备了这个模板.在没有特殊说明的情况下,本书后续的示例都会在此模板的基础上添加额外代码,该模板的代码将不会出现在示例的代码清单里. 新建一个Templates.html文件,加入如代码清单2-2所示的代码. 代码清单2-2 模板代码清单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd&q

《Ext JS权威指南》——2.1节获取Ext JS 4

第2章 从"Hello World"开始 "Hello World"几乎已经成为所有开发类图书的必用案例,本书也不能免俗.本章将通过编写"Hello World"程序来让大家对如何使用Ext JS进行开发有初步的了解,如Ext JS代码是如何运行的.代码书写风格是怎样的.如何实现本地化等.2.1 获取Ext JS 4 要下载Ext JS 4,可访问地址:http://www.sencha.com/products/Ext JS/download/