第8章调试技巧.ppt

1、第8章 调试技巧,使用好的调试工具并掌握好的调试技巧能够加快软件开发进程，提高产品质量。本章介绍使用Firebug和Aptana调试JavaScript程序的一些技巧。,8.1 深入解析Firebug的调试功能,在本书的第五章中已经向读者介绍过了Firefox浏览器的优秀调试插件Firebug的界面和基本功能。本节将向读者深入讲解如何利用Firebug的控制台输出各种自定义的信息、查看错误提示，如何利用命令行工具在页面上执行JavaScript代码，以及如何使用脚本查看器进行脚本的调试。,8.1.1 检查常规错误,当Firefox遇到一个JavaScript错误时，Firebug会在其控制台输

2、出一个错误信息。这个错误信息包含了错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法、以及事件对象信息。,8.1.2 完善的log功能,1.console.log 2.console.debug 3. 4.console.warn 5.console.error 6.console.assert 7.console.dir 8.console.dirxml 9.console.trace 10.console.group和console.groupEnd 11.console.time和console.timeEnd 12.file和co

3、fileEnd 13.console.count,8.1.3 控制台的命令行功能,Firebug的控制台还提供了命令行功能，使得开发者可以直接通过浏览器在当前页面环境下运行JavaScript程序。如图所示，直接在控制台下面的输入框中输入JavaScript代码，然后按回车键，所输入的代码会显示在控制台中，并立即执行该代码。,8.1.4 断点、单步执行和变量信息,Firebug的脚本查看器提供了JavaScript的断点和单步执行的调试功能，使得开发者可以方便的跟踪程序运行的情况，并了解运行过程中的各种状态的变化。在程序中添加断点有两种方法：一种是在程序中使用关键字debug

4、ger；另外一种是在脚本查看器中添加断点。 1.在程序中使用关键字debugger 2. 使用脚本查看器添加断点,8.1.5 在其他浏览器中使用Firebug的控制台,虽然Firebug插件只能在Firefox中使用，但是Firebug官方提供了一个JavaScript开发的组件，将其包含到程序页面中就可以在其他浏览器环境中使用Firebug的控制台功能，官方将其称为Firebuglite。Firebuglite可以在Firebuglite/lite.html下载到。,8.1.6 屏蔽测试代码,在发布的项目中，不再需要显示各种各样的调试信息，除了将测试代码删除之外，还可以在页面头部加入下面的J

5、avaScript代码以屏蔽测试代码的信息输出，代码如下所示。 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.consolenamesi = function() ,8.2 使用Aptana的集成调试功能,Aptana也在其IDE内集成了借助于浏览器实现的调试

6、功能。普通版的Aptana是利用Firefox进行调试，而专业版的Aptana则提供了利用IE进行调试的功能。Aptana的脚本调试功能与Firebug很像，所不同的是调试窗口是集成在Aptana内的，这样就给开发者提供了一定的便利。,8.2.1 配置集成调试环境,使用Aptana的调试功能需要在Firefox上安装一个叫做Aptana Debugger Service的插件，该插件在启动Firefox的调试功能时会自动安装，安装完成后会在Firefox浏览器右下角添加一个类似次轮形状的Aptana的小图标，如图所示。,8.2.2 启动调试,配置好调试选项后，就可以启动调试功能了。单击快捷操作

7、按钮中的”调试”按钮，Aptana会打开一个新的Firefox进程来访问当前编辑的页面，并且将自身状态切换到调试视图。当第一次使用调试功能时，Aptana会提示当前使用的功能关联到调试视图，需要将调试视图打开，询问用户是否打开该视图，如图所示。,8.2.3 断点、单步执行和变量信息,同Firebug一样，在程序中使用debugger关键字会添加一个断点。在Aptana中启动调试后，如果Firefox在解析JavaScript代码时遇到debugger关键字，则会中断程序的执行，并将窗口焦点交给Aptana。下面来看一个简单的示例，其代码如下所示。,8.2.4 使用console.log和dum

8、p输出文本信息,Aptana也提供了向控制台输出信息的方法，就是使用console.log或者dump。下面的示例演示了这两个方法的使用，其代码如下所示。,8.2.5 使用aptana.trace输出调用堆栈信息,同Firebug的console.trace一样，Aptana也提供了输出调用堆栈信息到控制台的方法，就是使用aptana.trace，该方法可以接受一个字符串参数作为输出信息的标题。下面来看一个简单的示例，代码如下所示。,8.2.6 使用断言,比起Firebug的console.assert，Aptana提供了更为强大的断言的功能，其通过一组Assert API来实现。,8.2.7 屏蔽调试代码,当调试完成后进行发布时，如果代码中仍然包含这些调试代码，用户在访问页面程序时就会发生错误，这时除了将测试代码删除外，还可以通过引入一段JavaScript代码来屏蔽这些测试代码。,8.3 小结,本章向读者介绍了调试Ajax应用程序的一些技巧。首先介绍了如何利用Firebug的控制台来输出各种类型的日志信息，以及介绍了命令行的使用，然后介绍了利用Firebug脚本查看