深入解析 Firebug 的调试功能


第 8 章 调试技巧 理想的软件开发是不需要调试的,但在现实开发过程中,开发人员总是会因为不同的原因而犯各种 各样的错误,以至于给所构建的系统带来不同程度的危害。有些错误浅显而低级,比如用错了大小写, 或者写错了变量名等等;而有些错误是复杂的逻辑错误,这类错误往往隐藏较深,不容易找出错误的原 因;另外一些错误可能是功能实现的方式有问题,导致程序有性能瓶颈等等。可以说,软件开发就是不 断编码和调试的过程。使用好的调试工具并掌握好的调试技巧能够加快软件开发进程,提高产品质量。 本章将向读者详细介绍使用 Firebug 和 Aptana 调试 JavaScript 程序的一些技巧。 8.1 深入解析 Firebug 的调试功能 在本书的第五章中已经向读者介绍过了 Firefox 浏览器的优秀调试插件 Firebug 的界面和基本功能。 本节将向读者深入讲解如何利用 Firebug 的控制台输出各种自定义的信息、查看错误提示,如何利用命 令行工具在页面上执行 JavaScript 代码,以及如何使用脚本查看器进行脚本的调试。 8.1.1 检查常规错误 当 Firefox 遇到一个 JavaScript 错误时,Firebug 会在其控制台输出一个错误信息。这个错误信息包 含了错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法、以及事件对象信息。下面这 个示例中,在测试按钮的事件处理函数中调用了一个不存在的函数,代码如下所示。 console demo 用 Firefox 打开页面,如图 8.1 所示。单击“test button”按钮,按钮的 click 事件处理函数 errorTest 会被调用,这时候 errorTest 会调用一个不存在的函数 notExistFunction,从而引发一个错误。浏览器遇到 ·220· 脚本错误时,右下角 Firebug 的绿色小图标会变成红色以提示当前页面存在脚本错误,如图 8.2 所示。 图 8.1 示例程序界面 图 8.2 错误提示 红色图标后面的数字表示错误的个数。单击红色图标或者按 F12 打开 Firebug 界面,如图 8.3 所示。 图 8.3 错误提示 错误被控制台用红色的字体,配上红色的错误图标醒目的现实了出来。错误的标题是对错误的描述, 这里“notExistFunction is not defined”指 notExistFunction 没有被定义。标题下面是发生错误的那一行代 码。标题右边是发生错误的文件名和错误代码所在的行号。单击标题后面的文件说明或者标题下面的错 误行代码提示,都可以转到脚本查看器并完整的查看该文件的脚本代码,如图 8.4 所示。 ·221· 图 8.4 查看错误代码 标题前面有一个“+”号的小图标,表示标题可以被展开,单击图标展开标题,如图 8.5 所示。 图 8.5 展开标题 标题展开后,下面显示的分别是包含错误代码的函数或方法,以及当前事件的相关信息。单击函数 或方法名,可以转到脚本查看器查看器代码,如图 8.6 所示。 图 8.6 查看函数代码 单击事件的描述信息,可以转到 DOM 查看器查看事件对象的详细信息,如图 8.7 所示。 ·222· 图 8.7 查看事件对象 当程序中出现错误时,通过查看 Firebug 控制台输出的错误信息可以让开发者快速定位分析并修复 错误。 8.1.2 完善的 log 功能 在调试程序时,经常需要让程序在运行过程中输出一些信息,使得开发者可以实时掌握到程序运行 的情况。Firebug 的控制台提供了完整的 log 功能,在第五章中读者已经见过 console.log 的使用,下面来 向读者介绍所有的 log 语法。 1.console.log console.log 提供了在控制台中输出信息的基本方法,其语法如下所示。 console.log(message1[,message2,...,messageN]); 在代码被执行时,其参数会被连接在一起输出到 Firebug 的控制台中。console.log 还支持 5 种占位 符,见表 8-1 所示。 表 8-1 console.log占位符 占位符符 说明 %s 字符串 %d,%i 整数 %f 浮点数 %o 对象 占位符只能在 console.log 的第一个参数中使用。当第一个参数中包含占位符时,程序会根据占位符 的数量,取从第二个参数开始的足够数量的参数替换到对应的占位符所在的位置,剩下的其他参数,则 按照默认行为被连接到输出信息的末尾。下面的示例演示了 console.log 的用法,其代码如下所示。 console.log demo ·223· 使用 Firefox 访问该示例页面,可以看到在 Firebug 的控制台中输出了指定的信息,如图 8.8 所示。 图 8.8 console.log 示例 2.console.debug console.debug 与 console.log 一样可以接受多个参数,所不同的是通过 console.debug 输出的信息会 被添加一个链接,单击链接时会根据参数的类型自动转换到其他视图。当参数为 DOM 对象或者 JavaScript 对象时,会转到 DOM 查看器显示对象的详细信息。当参数为 HTML 元素时,则会转到 HTML 查看器并定位到该元素节点上。如果参数为一个函数或者方法,则会转到脚本查看器并定位到函数或者 方法的定义所在行。如果参数只是一个数字或者字符串等基本类型的值,则不会添加任何链接。比较特 殊的是当参数为数组时,Firebug 会分析其中每个元素的类型并添加相应的链接。下面的示例显示了 console.debug 的用法,代码如下所示。 console.debug demo ·224·

console.debug demo

程序运行后,在 Firebug 控制台输出的信息如图 8.9 所示。 图 8.9 console.debug 示例 单击第一条信息的链接,Firebug 转到 DOM 查看器视图并显示了对象的详细信息,如图 8.10 所示。 ·225· 图 8.10 查看对象详细信息 单击“func(a,b)”这条信息的链接,Firebug 转到脚本查看器视图,并定位到该函数定义所在的行, 如图 8.11 所示。 图 8.11 查看函数定义 单击“

”这条信息时,则会转到 HTML 查看器并定位到该元素节点上,如图 8.12 所 示。 图 8.12 查看 HTML 元素 3.console.info console.info 的功能与 console.debug 一样,所不同的是其会在输出到 Firebug 控制台的信息前面加上 一个表示注意信息的小图标。例如,将上面示例中的 console.debug 替换成 console.info,如下所示。 console.info demo

console.info demo

其输出效果如图 8.13 所示。 图 8.13 console.info 示例 4.console.warn console.warn 的功能与 console.debug 一样,所不同的是会在输出到 Firebug 控制台的信息前面加上 一个表示警告的图标,并将信息背景色设置为绿色。例如,将上面示例代码中的 console.info 全部修改 为 console.warn,如下所示。 ·227· console.warn demo

console.warn demo

其输出到控制台的信息如图 8.14 所示。 图 8.14 console.warn 示例 5.console.error ·228· console.error 的功能与 console.debug 一样,所不同的是会在输出到 Firebug 控制台的信息前面加上 表示错误的图标,并在浏览器右下角 Firebug 的小图标中提示错误。将上面示例代码中的 console.warn 全部修改为 console.error,如下所示。 console.error demo

console.error demo

其输出效果如图 8.15 所示。 ·229· 图 8.15 console.error 示例 6.console.assert console.assert 可以进行断言,它接受 1 个表达式作为参数,当表达式的值为 true 时,不输出任何信 息,当表达式的值为 false 时,输出一条表示断言失败的错误信息。console.assert 还可以接受更多的参数, 以此作为断言失败时显示的信息。下面的示例使用 console.assert 来判断传入函数的参数的数据类型,代 码如下所示。 console.assert demo 其输出到控制台的结果如图 8.16 所示。 ·230· 图 8.16 console.assert 示例 7.console.dir console.dir 可以直接将对象或 HTML 元素的详细信息输出到 Firebug 中,就同在 DOM 查看器中查 看到的信息一样。下面的例子演示了 console.dir 的用法。 console.dir demo

console.dir demo

其在控制台中输出的内容如图 8.17 所示。 ·231· 图 8.17 console.dir 示例 8.console.dirxml console.dirxml 能够将 HTML 或 XML 节点元素的源代码输出到控制台中,就如同在 HTML 查看器 中看到的效果一样,参考下面的示例代码。 console.dirxml demo

console.dirxml demo

·232· 其输出到控制台的信息如图 8.18 所示。 图 8.18 console.dirxml 示例 9.console.trace 通过在函数或者方法内添加 console.trace()语句,可以在 Firebug 的控制台中输出函数被调用的信息 以及调用该函数的函数或者方法。下面的示例演示了 console.trace 的用法。 console.trace demo ·233· 程序中先后通过 4 个函数来调用添加了 trace 语句的函数 func,其在控制台输出的信息如图 8.19 所 示。 图 8.19 console.trace 示例 如果函数或者方法存在多层嵌套调用,则 console.trace 会输出整个调用链的信息,示例代码如下。 console.trace demo 在上面的程序中,funcA、funcB、funcC、funcD 存在嵌套调用关系。程序向 Firebug 控制台输出的 信息如图 8.20 所示。 ·234· 图 8.20 查看调用链 10.console.group 和 console.groupEnd console.group 和 console.groupEnd 可以给输出的 log 信息进行分组。console.group 标识一个分组开始, 其可以接受一个或者多个参数作为该分组的名称或者提示语,console.groupEnd 标识一个分组结束。下 面的示例中,将一些 log 信息分为了两组,代码如下所示。 console.group demo 分组的效果如图 8.21 所示。 ·235· 图 8.21 分组示例 11.console.time 和 console.timeEnd 通过将 console.time 和 console.timeEnd 添加到一段代码的开头和结尾,可以计算并输出执行这段代 码所花费的时间,以毫秒为单位。console.time 接受一个字符串参数作为这个计算器的名字,在遇到一 个以同样字符串作为参数的 console.timeEnd 时就会停止计时并输出时间耗费的信息。下面的示例输出了 执行一个循环体所花费的时间,代码如下所示。 console.time demo 其输出到 Firebug 控制台的信息如图 8.22 所示。 图 8.22 console.time 示例 ·236· 12.console.profile 和 console.profileEnd console.profile 和 console.profileEnd 的使用方式与 console.time 和 console.timeEnd 相似,只是他们输 出的是对所包含的代码段的性能测试数据,示例代码如下。 console.profile demo 其输出到控制台的信息如图 8.23 所示。 图 8.23 console.profile 示例 13.console.count console.count 可以统计其自身被执行的次数,它接受一个字符串参数作为输出到控制台的信息的标 题。一般将 console.count 放入到函数或者方法中来查看某个函数或者方法被调用的次数。下面的例子演 示了 console.count 的用法。 console.count demo 程序中 console.count 被放置在了函数 funcA 和 funcB 中。funcA 每 500 毫秒执行一次。每执行两次 funcA 执行一次 funcB。其输出到控制台的信息如图 8.24 至 8.26 所示。 图 8.24 console.count 输出的信息 ·238· 图 8.25 console.count 输出的信息 图 8.26 console.count 输出的信息 8.1.3 控制台的命令行功能 Firebug 的控制台还提供了命令行功能,使得开发者可以直接通过浏览器在当前页面环境下运行 JavaScript 程序。如图 8.27 和图 8.28 所示,直接在控制台下面的输入框中输入 JavaScript 代码,然后按 回车键,所输入的代码会显示在控制台中,并立即执行该代码。 图 8.27 输入代码 ·239· 图 8.28 运行结果 单击命令行输入框右边的红色按钮可以将输入框放大。放大后的输入框会增加 run(运行)、clear (清除)和 copy(复制)三个按钮,如图 8.29 所示。 图 8.29 放大输入框 Firebug 还为命令行工具预先定义了一些便捷的方法,例如可以使用$(id) 来代替 document.getElementById(id),使 用 $$()来通过 CSS 选择器引用元素节点等等。所有的这些便捷方法请参 见表 8-2。 表 8-2 命令行便捷方法 方法 说明 $(id) 通过id返回元素。 $$(selector) 通过CSS选择器返回元素数组。 $x(xpath) 通过xpath表达式返回元素数组。 dir(object) 在控制台中列出对象的所有属性。 dirxml(node) 列出节点的HTML或XML源代码树。 cd(window) 切换当前window对象,默认情况下命令行显示的是顶层window对象。 clear() 清空控制台显示的所有信息。 inspect(object[,tabName]) 监视一个对象。tabName表示在哪个标签页对该对象进行监视,可选值为“html”、 “css”、“script”和“dom”。 keys(object) 返回由对象的属性名组成的数组。 values(object) 返回由对象的属性值组成的数组。 debug(fn) 在函数的第一行增加一个断点。 undebug(fn) 移除在函数第一行的断点。 monitor(fn) 跟踪函数fn的调用。 ·240· unmonitor(fn) 不跟踪函数fn的调用。 monitorEvents(object[, types]) 跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、 “scroll”、“text”、“ui”和“xul”。 unmonitorEvents(object[, types]) 不跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、 “scroll”、“text”、“ui”和“xul”。 profile([title]) 开始对脚本进行性能测试,可选参数title将作为测试结果的标题。 profileEnd() 结束脚本性能测试。 8.1.4 断点、单步执行和变量信息 Firebug 的脚本查看器提供了 JavaScript 的断点和单步执行的调试功能,使得开发者可以方便的跟踪 程序运行的情况,并了解运行过程中的各种状态的变化。在程序中添加断点有两种方法:一种是在程序 中使用关键字 debugger;另外一种是在脚本查看器中添加断点。 1.在程序中使用关键字 debugger 现在来使用一个简单的例子演示该功能,如下所示。 debugger demo (1)程序中将函数 debug 注册成为了测试按钮的 click 事件处理函数,并在函数的第一行使用了关 键字 debugger。用 Firefox 打开示例页面,并单击“test button”按钮,会发现并没有弹出对话框,而是 停止在了 debugger 这一行,如图 8.30 所示。 段· ·241· 图 8.30 断点 (2)脚本查看器的脚本代码视图中用黄色的三角形图标标识了当前停留的行,右边的 Watch 窗口 显示了当前函数作用域内的所有变量信息。由于变量的定义是存在于整个函数体内的,而初始化则要等 到程序执行到初始化变量的代码,所以这时变量 a 和变量 b 的值都是 undefined。Watch 窗口上面部分有 4 个控制按钮,如图 8.31 所示。 图 8.31 控制按钮 (3)控制按钮的第一个是 Continue 按钮,单击该按钮可以让中断的程序恢复正常运行。第二个和 第三个分别是 Step Over 按钮和 Step Into 按钮。这两个按钮都提供了单步执行的功能,所不同的是当遇 到调用其他函数或者方法的时候,Step Into 会跳入该函数或者方法内而 Step Over 不会。最后一个是 Step Out 按钮,单击该按钮会跳出当前的函数或者方法。 (4)使用 Step Over 或者 Step Into 按钮让代码单步执行到第 11 行:var b = add(a,1)。这时候变量 a 已经被初始化,在右边 Watch 窗口中可以看到 a 的值已经被更新,如图 8.32 所示。 图 8.32 查看变量信息 (5)由于这一行代码调用了另外一个函数 add,所以如果单击“Step Into”按钮,则会跳入 add 函 数体,如图 8.33 所示。 ·242· 图 8.33 Step Into (6)而如果使用 Step Over,则不会跳入函数 add 内,如图 8.34 所示。 图 8.34 Step Over (7)在使用 Step Into 按钮跳入 add 函数后,如果使用 Step Out 按钮,则会跳出 add 函数返回 debug 函数,如图 8.35 所示。 图 8.35 Step Out 2. 使用脚本查看器添加断点 使用脚本查看器添加断点非常简单,只需要在代码所在的行的行号前面用鼠标左键单击即可。现在 在第 12 行添加一个断点,如图 8.36 所示。 ·243· 图 8.36 添加断点 单击“Continue”按钮让程序继续运行,程序在第 12 行被中断,如图 8.37 所示。 图 8.37 再次中断 灵活运用断点、单步执行和 Watch 窗口可以方便的对程序进行深入的跟踪调试,读者可以多进行一 些尝试以便熟练掌握这些功能的使用。 8.1.5 在其他浏览器中使用 Firebug 的控制台 虽然 Firebug 插件只能在 Firefox 中使用,但是 Firebug 官方提供了一个 JavaScript 开发的组件,将 其包含到程序页面中就可以在其他浏览器环境中使用 Firebug 的控制台功能,官方将其称为 Firebuglite。 Firebuglite 可以在 http://www.getfirebug.comFirebuglite/lite.html 下载到。其包含的文件如图 8.38 所示,主 要有 JavaScript 文件、CSS 文件、HTML 文件和 PNG 文件。 ·244· 图 8.38 Firebuglite 包含的文件 将整个 firebuglite 包放到项目中,并在需要使用 Firebug 控制台功能的页面引入 firebug.js 文件即可。 下面的示例演示了 Firebuglite 的使用方法,其代码如下所示。 firebuglite demo

firebuglite demo

使用 IE 或者其他非 Firefox 浏览器访问该页面,显示效果如图 8.39 所示。 ·245· 图 8.39 firebuglite 注意:示例代码中 HTML 节点内的属性 debug=”true”表示模式显示控制台面板。如果不添加该属性, 则需要在页面打开后按 F12 打开面板。 8.1.6 屏蔽测试代码 在发布的项目中,不再需要显示各种各样的调试信息,除了将测试代码删除之外,还可以在页面头 部加入下面的 JavaScript 代码以屏蔽测试代码的信息输出,代码如下所示。 var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"]; window.console = {}; for (var i = 0; i < names.length; ++i) window.console[names[i]] = function() {} 其原理是覆盖掉 console 对象的各种方法,将他们设置为空函数,这样测试代码就不会有任何行为 发生。 8.2 使用 Aptana 的集成调试功能 Aptana 也在其 IDE 内集成了借助于浏览器实现的调试功能。普通版的 Aptana 是利用 Firefox 进行调 试,而专业版的 Aptana 则提供了利用 IE 进行调试的功能。Aptana 的脚本调试功能与 Firebug 很像,所 不同的是调试窗口是集成在 Aptana 内的,这样就给开发者提供了一定的便利。 8.2.1 配置集成调试环境 使用 Aptana 的调试功能需要在 Firefox 上安装一个叫做 Aptana Debugger Service 的插件,该插件在 启动 Firefox 的调试功能时会自动安装,安装完成后会在 Firefox 浏览器右下角添加一个类似次轮形状的 Aptana 的小图标,如图 8.40 所示。 ·246· 图 8.40 小图标 然后需要先进行一些基本配置。首先通过快捷操作按钮中调试按钮的下拉列表菜单,打开调试选项 窗口,如图 8.41 和图 8.42 所示。 图 8.41 打开调试选项窗口 图 8.41 调试选项窗口 展开 Web Browser 节,选择 Firefox。首先在 Main 选项卡下面的第一项 Web Browser 下面的 Browser executable进行设置,将其设置为本地Firebox.exe所在路径。然后将第三项Server选项切换到User external Wb server。Base URL 填写本地 Web 服务器的 URL 地址,然后勾选上 Append project name(附加项目 名称)。单击“应用”按钮并关闭。到此设置结束。 ·247· 8.2.2 启动调试 配置好调试选项后,就可以启动调试功能了。单击快捷操作按钮中的”调试”按钮,Aptana 会打开一 个新的 Firefox 进程来访问当前编辑的页面,并且将自身状态切换到调试视图。当第一次使用调试功能 时,Aptana 会提示当前使用的功能关联到调试视图,需要将调试视图打开,询问用户是否打开该视图, 如图 8.42 所示。 图 8.42 打开调试视图 勾选上“记住我的决定”并单击“是”,调试视图被打开,如图 8.43 所示。 图 8.44 调试视图 可以看到,界面右上角的视图切换按钮新增加了一个调试按钮。主工作区域的位置下移了一部分, 上面新增了调试区域。调试区域左边这块是控制区,显示了当前调试的进程信息,以及提供了一些控制 按钮。右边这块则是变量信息查看面板,其作用于 Firebug 中的 Watch 窗口一样。 Aptana 切换到调试视图的同时,一个新的 Firefox 进程会被打开。在当前页面在 Firefox 中显示出来 前,Firefox 显示的是 Aptana 的加载页面,如图 8.45 所示。 ·248· 8.45 加载页面 可以看到,这时候 Firefox 右下角表示 Aptana Debugger Service 的小图标由灰色变成了亮色。 8.2.3 断点、单步执行和变量信息 同 Firebug 一样,在程序中使用 debugger 关键字会添加一个断点。在 Aptana 中启动调试后,如果 Firefox 在解析 JavaScript 代码时遇到 debugger 关键字,则会中断程序的执行,并将窗口焦点交给 Aptana。 下面来看一个简单的示例,其代码如下所示。 debugger demo ·249· 使用 Aptana 启动调试,Aptana 打开一个新的 Firefox 进程浏览被调试的页面,在 Firefox 解析页面 中的 JavaScript 脚本时,遇到 debugger 关键字,Aptana Debug Service 会中断页面程序的执行,并切换到 Aptana,定位到页面源代码中 debugger 这一行,如图 8.46 所示。 图 8.46 debugger 关键字 除了使用 debugger 关键字添加断点外,还可以直接在 Aptana 中添加断点。在页面源代码的某行前 面的灰色区域中双击鼠标左键,或者右击该区域在弹出的菜单中选择“切换断点”,就可以为该行添加 一个断点,如图 8.47 所示。 图 8.47 切换断点 同 Firebug 一样,Aptana 也提供了单步执行和查看变量信息的功能。现在在第 14 行,即 add 函数的 第一行添加一个断点,再次启动调试,程序首先会在 debugger 关键字所在的行中断,这时变量查看器中 的内容如图 8.48 所示。 图 8.48 查看变量信息 单击调试面板中的“继续”按钮,程序运行到所设置的断点处再次被中断,如图 8.49 所示。 ·250· 图 8.49 再次中断 调试面板中提供了三个与 Firebug 脚本查看器中的 Step Into(单步跳入)、Step Over(单步跳过) 和 Step Out(单步返回)按钮功能一样的按钮,如图 8.50 所示。 图 8.50 调试按钮 这些按钮的用法参考前面介绍的 Firebug 的脚本调试器中对应按钮的用法,这里不再赘述。 注意:如果发现 Aptana 的调试功能无法正常使用,请在 Firefox 中禁用 Firebug 后再进行尝试。 8.2.4 使用 console.log 和 dump 输出文本信息 Aptana 也提供了向控制台输出信息的方法,就是使用 console.log 或者 dump。下面的示例演示了这 两个方法的使用,其代码如下所示。 debugger log demo ·251· 启动调试,程序在 debugger 关键字处中断并返回 Aptana,这时控制台中输出的信息如图 8.51 所示。 图 8.51 console.log 和 dump 8.2.5 使用 aptana.trace 输出调用堆栈信息 同 Firebug 的 console.trace 一样,Aptana 也提供了输出调用堆栈信息到控制台的方法,就是使用 aptana.trace,该方法可以接受一个字符串参数作为输出信息的标题。下面来看一个简单的示例,代码如 下所示。 aptana.trace demo 程序最终输出到 Aptana 控制台的信息如图 8.52 所示。 图 8.52 aptana.trace 示例 ·252· 8.2.6 使用断言 比起 Firebug 的 console.assert,Aptana 提供了更为强大的断言的功能,其通过一组 Assert API 来实 现,见表 8-3 所示。 表 8-3 Aptana Assert API 方法 说明 aptana.fail() 总是返回断言失败。 aptana.assert(obj) 断言obj为真或者有意义。 aptana.assertEquals(arg1,arg2) 断言两个参数相等。 aptana.assertNotEquals(arg1,arg2) 断言两个参数不等。 aptana.assertGreater(arg1,arg2) 断言第一个参数比第二个参数大。 aptana.assertNotGreater(arg1,arg2) 断言第一个参数不比第二个参数大。 aptana.assertLess(arg1,arg2) 断言第一个参数比第二个参数小。 aptana.assertNotLess(arg1,arg2) 断言第一个参数不比第二个参数小。 aptana.assertContains(arg1,arg2) 断言第一个参数被第二个参数包含。 aptana.assertNotContains(arg1,arg2) 断言第一个参数不被第二个参数包含。 aptana.assertTrue(expression) 断言表达式为真。 aptana.assertFalse(expression) 断言表达式为假。 aptana.assertNull(obj) 断言对象为Null。 aptana.assertNotNull(obj) 断言对象不为Null。 aptana.assertUndefined(var) 断言变量未定义。 aptana.assertNotUndefined(var) 断言变量已定义。 aptana.assertInstanceOf(arg1,arg2) 断言第一个参数为第二个参数的一个实例。 aptana.assertNotInstanceOf(arg1,arg2) 断言第一个参数不是第二个参数的一个实例。 aptana.assertTypeOf(obj,type) 断言obj的类型是type。 aptana.assertNotTypeOf(obj,type) 断言obj的类型不是type。 下面的示例演示了这些方法的用法,示例代码如下所示。 aptana.assert demo 启动调试后,当某个断言失败时,程序的执行会被中断,并在 Firefox 中弹出一个对话框,如图 8.53 所示。 图 8.53 Assert 对话框 对话框包含 3 个按钮:Continue(继续)、Debug(调试)和 Terminate(终止)按钮。单击“Continue” 按钮程序会忽略当前断言并继续执行;单击“Debug”按钮会转入 Aptana 进行调试;单击“Terminate” 按钮会终止调试。 8.2.7 屏蔽调试代码 当调试完成后进行发布时,如果代码中仍然包含这些调试代码,用户在访问页面程序时就会发生错 误,这时除了将测试代码删除外,还可以通过引入一段 JavaScript 代码来屏蔽这些测试代码,代码如下 所示。 var names = ["log", "trace", "assert", "assertEquals", "assertNotEquals", "assertGreater", "assertNotGreater", "assertLess","assertNotLess", "assertContains", "assertNotContains", "assertTrue", "assertFalse", "assertNull", " assertNotNull","assertUndefined","assertNotUndefined","assertInstanceOf","assertNotInstanceOf","assertTypeOf ","assertNotTypeOf"]; window.aptana = {}; for (var i = 0; i < names.length; ++i) window.console[names[i]] = function(){} window.dump = function(){} window.console = window.aptana; 8.3 小结 本章向读者介绍了调试 Ajax 应用程序的一些技巧。首先介绍了如何利用 Firebug 的控制台来输出各 种类型的日志信息,以及介绍了命令行的使用,然后介绍了利用 Firebug 脚本查看器进行断点调试和查 ·254· 看变量信息。接着向读者介绍了如何配置和使用 Aptana 的集成调试功能,包括如何使用断点调试,如 何向控制台输出信息,如何输出调用堆栈信息以及如何使用断言功能。通过本章的学习,结合第 5 章中 对开发工具的介绍,使读者能够使用调试工具对 Ajax 应用程序进行调试。
还剩35页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享pdf获得金币 ] 9 人已下载

下载pdf

pdf贡献者

balkline

贡献于2011-10-21

下载需要 15 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf