第8章调试技巧.ppt

《第8章调试技巧.ppt》由会员分享，可在线阅读，更多相关《第8章调试技巧.ppt（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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.log1.console.log2.console.debug2.console.debug3.console.info3.console.info4.console.warn4.console.warn5.console.error5.console.error6.console.assert6.console.assert7.console.dir7.console.dir8.console.dirxml8.console.dirxml9.

3、console.trace9.console.trace10.console.group10.console.group和和console.groupEndconsole.groupEnd11.console.time11.console.time和和console.timeEndconsole.timeEnd12.console.profile12.console.profile和和console.profileEndconsole.profileEnd13.console.count13.console.count8.1.3 控制台的命令行功能Firebug的控制台还提供了命令行功能，使得

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

5、的控制台虽然Firebug插件只能在Firefox中使用，但是Firebug官方提供了一个JavaScript开发的组件，将其包含到程序页面中就可以在其他浏览器环境中使用Firebug的控制台功能，官方将其称为Firebuglite。Firebuglite可以在http:/Firebuglite/lite.html下载到。8.1.6 屏蔽测试代码在发布的项目中，不再需要显示各种各样的调试信息，除了将测试代码删除之外，还可以在页面头部加入下面的JavaScript代码以屏蔽测试代码的信息输出，代码如下所示。var names=log,debug,info,warn,error,assert,di

6、r,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内集成了借助于浏览器实现的调试功能。普通版的Aptana是利用Firefox进行调试，而专业版的Aptana则提供了利用IE进行调试的功能。Aptana的脚本调试功能与Firebug很像，所不同的是调试窗口是集成在Aptana内的，这样就给开发者提

7、供了一定的便利。8.2.1 配置集成调试环境使用Aptana的调试功能需要在Firefox上安装一个叫做Aptana Debugger Service的插件，该插件在启动Firefox的调试功能时会自动安装，安装完成后会在Firefox浏览器右下角添加一个类似次轮形状的Aptana的小图标，如图所示。8.2.2 启动调试配置好调试选项后，就可以启动调试功能了。单击快捷操作按钮中的”调试”按钮，Aptana会打开一个新的Firefox进程来访问当前编辑的页面，并且将自身状态切换到调试视图。当第一次使用调试功能时，Aptana会提示当前使用的功能关联到调试视图，需要将调试视图打开，询问用户是否打开

8、该视图，如图所示。8.2.3 断点、单步执行和变量信息同Firebug一样，在程序中使用debugger关键字会添加一个断点。在Aptana中启动调试后，如果Firefox在解析JavaScript代码时遇到debugger关键字，则会中断程序的执行，并将窗口焦点交给Aptana。下面来看一个简单的示例，其代码如下所示。8.2.4 使用console.log和dump输出文本信息Aptana也提供了向控制台输出信息的方法，就是使用console.log或者dump。下面的示例演示了这两个方法的使用，其代码如下所示。8.2.5 使用aptana.trace输出调用堆栈信息同Firebug的con

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