第8章 调试技巧.pptVIP

第8章 调试技巧 使用好的调试工具并掌握好的调试技巧能够加快软件开发进程，提高产品质量。本章介绍使用Firebug和Aptana调试JavaScript程序的一些技巧。 8.1 深入解析Firebug的调试功能 在本书的第五章中已经向读者介绍过了Firefox浏览器的优秀调试插件Firebug的界面和基本功能。本节将向读者深入讲解如何利用Firebug的控制台输出各种自定义的信息、查看错误提示，如何利用命令行工具在页面上执行JavaScript代码，以及如何使用脚本查看器进行脚本的调试。 8.1.1 检查常规错误 当Firefox遇到一个JavaScript错误时，Firebug会在其控制台输出一个错误信息。这个错误信息包含了错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法、以及事件对象信息。 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和fileEnd 13.console.count 8.1.3 控制台的命令行功能 Firebug的控制台还提供了命令行功能，使得开发者可以直接通过浏览器在当前页面环境下运行JavaScript程序。如图所示，直接在控制台下面的输入框中输入JavaScript代码，然后按回车键，所输入的代码会显示在控制台中，并立即执行该代码。 8.1.4 断点、单步执行和变量信息 Firebug的脚本查看器提供了JavaScript的断点和单步执行的调试功能，使得开发者可以方便的跟踪程序运行的情况，并了解运行过程中的各种状态的变化。在程序中添加断点有两种方法：一种是在程序中使用关键字debugger；另外一种是在脚本查看器中添加断点。 1.在程序中使用关键字debugger 2. 使用脚本查看器添加断点 8.1.5 在其他浏览器中使用Firebug的控制台 虽然Firebug插件只能在Firefox中使用，但是Firebug官方提供了一个JavaScript开发的组件，将其包含到程序页面中就可以在其他浏览器环境中使用Firebug的控制台功能，官方将其称为Firebuglite。Firebuglite可以在Firebuglite/lite.html下载到。 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() {} 8.2 使用Aptana的集成调试功能 Aptana也在其IDE内集成了借助于浏览器实现的调试功能。普通版的Aptana是利用Firefox进行调试，而专业版的Aptana则提供了利用IE进行调试的功能。Aptana的脚本调试功能与Firebug很像，所不同的是调试窗口是集成在Aptana内的，这样就给开发者提供了一定的便利。 8.2.1 配置集成调试环境 使用Aptana的调试功能需要在Firefox上安装一个叫做Aptana Debugger Service的插件，该插件在启动Firefox的调试功能时会自动安装，安装完成后会在Firefox浏览器右下角添加一个类似次轮形状的Aptana的小图标，如图所示。 8.2.2 启动调试 配置好调试选项后，就可以启动调试功能了。单击快捷操作按钮中的”调试”按钮，Aptana会打开一个新的Firefox进程来访问当前编辑的页面，并且将自身状态切换到调试视图。当第一次使用调试功能时，Aptana会提示当前使用的功能关联到调试视图，需要将调试视图打开，询问用户是否打开该视图，如图所示。 8.2.3 断点、单步执行和变量信息 同Firebug一样，在程序中使用debugger关键字会添加一个断点。在Aptana中启动调试