《JavaScript忍者秘籍》——第2章 利用测试和调试武装自己 2.1调试代码

第2章 利用测试和调试武装自己

本章涵盖以下内容。

  • JavaScript代码调试工具
  • 测试用例生成技术
  • 构建测试套集
  • 如何测试异步操作

为代码构建有效的测试套件是非常重要的,所以在我们进入任何编码之前,要首先对它进行讨论。和可靠的测试策略同样重要的是要对所有代码进行测试,外部因素有可能影响代码的操作效果这点十分重要,这正是我们在跨浏览器JavaScript开发时要面对的情况。

我们不仅要处理典型问题:确保代码质量,尤其是与多位同时编写一段代码的开发人员打交道时,并避免出现会破坏API的回归错误(所有程序员都需要处理的普通问题),还要处理:判断代码是否在我们选择支持的所有浏览器上都能正常运行。

在讨论第11章的跨浏览器策略时,我们将进一步深入讨论跨浏览器开发问题,但是现在,重要的是要强调测试的重要性和测试策略的定义,因为我们将在本书的剩余部分使用这些策略。

在本章中,我们将了解用于调试JavaScript代码的一些工具和技术,并基于这些结果生成测试用例,并构建测试套件,从而可靠地运行这些测试。让我们开始学习吧。

2.1 调试代码

还记得调试JavaScript的时候要使用alert()来验证变量的值吗?不过,在过去几年里,调试JavaScript代码的能力已经得到了大大的改善,在很大程度上是因为Firefox上的Firebug开发扩展的普及。

所有主流浏览器都有类似的工具。

  • Firebug——流行的Firefox开发者扩展,越来越好。
  • IE开发者工具——存在于IE 8及以后版本。
  • Opera Dragonfly——存在于Opera 9.5及以后版本。也适用于移动版Opera。
  • WebKit开发者工具——首次出现在Safari 3中,在Safari 4中得到显著改善,现在也能用在Chrome中。

调试JavaScript有两个重要的方法:日志记录和断点。它们可以回答下面这个重要的问题(“我的代码发生了什么事?”),但两种方法是从不同的角度来解决这个问题的。让我们先看一下日志记录。

2.1.1 日志记录
日志记录(logging)语句(如,在Firebug、Safari、Chrome以及新版本Opera中使用的console.log()方法)是代码的一部分(即使可能是暂时的),并且在跨浏览器场景上十分有用。我们可以在代码中记录日志,并且可以从所有现代浏览器的控制台上看到的日志消息中获益。

相对于古老的“添加alert函数”这种技术,这些浏览器控制台都极大地改进了日志记录过程。在不阻碍程序正常处理过程的情况下,所有的日志记录语句都能写入到控制台,并能立即或稍后获得显示——而有些事情是alert()函数无法做到的。

例如,如果我们想知道变量x在代码特定位置的值是什么?我们可能会这样写:

在启用了JavaScript控制台的Chrome浏览器上,上述代码的执行结果如图2.1所示。

在记录日志时,老版本的Opera实现了一个postError()属性方法。如果必须要在这些旧版浏览器中记录日志,我们可以采用温和、更高级别的日志记录方法,适用于所有的浏览器,代码如下所示。

注:如果不需要处理过时版本的Opera,可以忽略这些代码,放心地使用console.log()。
代码清单2.1 一个适用于所有现代浏览器的简单日志记录方法

在代码运行时,通过记录日志查看程序运行状态是很好的做法,但有时我们要暂停代码的运行,并需要查看一下此时的相关信息。

这就是断点要做的。

2.1.2 断点
断点(breakpoint)是一个比日志记录更复杂的概念,但它比日志有一个更显著的优势:它能在特定的代码上暂停脚本的执行,从而暂停浏览器运行。这使得我们可以在该断点处,随意查看任意代码的状态。其中包括所有可访问的变量、上下文以及作用域链。

如下所示,假设有一个页面,使用我们的新log()方法记录日志。

代码清单2.2 使用自定义log()方法的简单页面

如果我们使用Firebug在代码清单2.2的注释行1设置一个断点(在脚本显示的行号上进行单击),刷新页面重新执行代码,调试器就会在这一行停止执行,并向我们展示图2.2所示的效果。

注意,右边的窗格允许我们查看代码运行的状态,包括x的值。调试器会在实际要执行的断点前暂停执行;在本例中,log()方法还没有被执行。

如果我们想使用新方法进行调试,可以单步执行该方法,一探究竟。单击“进入(step into)”按钮(最左边的黄金箭头按钮)可以让调试器开始执行新方法的第一行,然后我们会看到图2.3所示的内容。注意显示的状态已经改变,从而让我们可以查看log()方法执行的新状态。

任何具有断点功能的全功能调试器都高度依赖于执行该调试器的浏览器环境。鉴于这个原因,上述开发者工具才会被创建;否则,它们的功能也不会实现。这是一个对整个Web开发社区的伟大贡献和救济,所有主流的浏览器实现者都可以创建有效的实用工具程序以便调试。

调试代码不仅符合其主要和明显目的(检测并修复bug),而且也可以帮助我们获取当前生成高效测试用例的最佳实践。

时间: 2024-09-20 18:30:22

《JavaScript忍者秘籍》——第2章 利用测试和调试武装自己 2.1调试代码的相关文章

《JavaScript忍者秘籍》——2.3 测试框架

2.3 测试框架 测试套件应该作为基本开发流程的一部分,所以应该选择一个非常适合自己代码风格和代码库的测试套件.一个JavaScript测试套件应该满足一个唯一需求:显示测试的结果,以便很容易地确定哪些测试通过的,哪些是失败的.测试框架可以帮助我们达到这一目标,除了创建测试并将其组织到测试套件中以外,不用再担心别的事情. 根据测试的需要,我们可以从JavaScript测试框架中找到很多功能.其中一些功能包括: 能够模拟浏览器行为(单击按键等). 测试的交互式控制(暂停和恢复测试). 处理异步测试

《JavaScript忍者秘籍》——2.4 测试套件基础知识

2.4 测试套件基础知识 测试套件的主要目的是聚合代码中的所有单个测试,将其组合成为一个单位,这样它们可以批量运行,提供一个可以轻松反复运行的单一资源. 为了更好地理解测试套件的工作原理,我们有必要了解如何构建一个测试套件.或许有些出人意料,构建JavaScript测试套件确实很容易.大约只需要40行代码就可以构建好一个功能. 人们可能会问"为什么要创建一个新的测试套件?",大多数情况下,可能没有必要编写自己的JavaScript测试套件.目前已经有大量的高质量测试套件可供选择.但是,

《JavaScript忍者秘籍》——第2章 利用测试和调试武装 自己2.1 调试代码

第2章 利用测试和调试武装 自己 本章涵盖以下内容. JavaScript代码调试工具 测试用例生成技术 构建测试套集 如何测试异步操作 为代码构建有效的测试套件是非常重要的,所以在我们进入任何编码之前,要首先对它进行讨论.和可靠的测试策略同样重要的是要对所有代码进行测试,外部因素有可能影响代码的操作效果这点十分重要,这正是我们在跨浏览器JavaScript开发时要面对的情况. 我们不仅要处理典型问题:确保代码质量,尤其是与多位同时编写一段代码的开发人员打交道时,并避免出现会破坏API的回归错误

《JavaScript忍者秘籍》——导读

**前言**Web应用程序将为用户提供丰富的用户界面体验,没有JavaScript,我们也就只能显示几张小图片.Web开发人员比以往任何时候都更需要熟练掌握能够为Web应用程序带来生命的语言. 像橙汁和早餐一样,JavaScript不再只用于浏览器了.该语言推倒了浏览器的界限,可用在Rhino和V8等引擎的服务器上,也可以用于像node.js这样的框架. 虽然本书主要是介绍用于Web应用程序的JavaScript,但本书第二部分提出的JavaScript基础适用范围也很广泛. 随着使用JavaS

《JavaScript忍者秘籍》——第1章 进入忍者世界 1.1即将探索的JavaScript库

第1章 进入忍者世界 本章涵盖以下内容: 介绍本书的目的和结构 将要关注的库 什么才是JavaScript高级编程 跨浏览器编程 测试套件示例 如果你正在阅读本书,应该知道,没有什么简单方法可以创建有效且跨浏览器的JavaScript 代码,除了编写整洁代码的常规挑战外,我们还要额外应对各种浏览器的差异和复杂性.为了应对这些挑战,JavaScript开发人员通常使用JavaScript库来实现通用和可重用的功能. 这些库虽然在方法.内容和复杂性方面有很大差异,但唯一不变的是:它们都需要简单易用,

《JavaScript忍者秘籍》——2.5 总结

2.5 总结 在这一章中,我们已经学习了一些与调试JavaScript代码相关的基本技术,以及基于这些结果构建简单的测试用例. 我们研究了在代码执行时,如何使用日志记录来观察代码的行为,我们甚至实现了一个方便的方法,可以确保在现代和传统浏览器上都能够成功记录日志,不管它们之间有多少差异. 我们探索了如何使用断点,在特定的代码行上停止代码的执行,以便能够了解代码执行时的状态. 然后学习了测试用例生成,定义并关注良好测试的特性:可重复性(repeatability).简单性(simplicity)和

《JavaScript忍者秘籍》——1.4 当前最佳实践

1.4 当前最佳实践 掌握JavaScript语言和跨浏览器编码问题是成为Web应用程序开发专家的重要条件,但它们并不是全部.要进军专家行列,还需要秀出以下很多开发人员之前都已经掌握的高质量代码.我们将在第2章深入研究这些被称为最佳实践(best practices)的特征,除了熟练掌握语言外,还包括如下元素. 测试. 性能分析. 调试技巧. 在我们的编程过程中,时常遵守这些最佳实践是极其重要的:跨浏览器开发的复杂性也直接证明了这一点.让我们来看看这些实践. 1.4.1 当前最佳实践:测试在本书

《JavaScript忍者秘籍》——1.5 总结

1.5 总结 以下是我们在本章所学到的内容. 跨浏览器的Web应用程序开发是困难的,比大多数人想象的都要难. 为了圆满完成跨浏览器开发,我们不仅要掌握JavaScript语言,还要全面了解浏览器以及它们的怪异模式和矛盾,并要具备当前最佳实践方面的良好基础. JavaScript开发毋庸置疑是很具有挑战性的,但有一些勇敢者已经沿着这条曲折的道路走了下来,那就是JavaScript库的开发者.我们将提炼这些代码库中的知识,有效地提高我们的开发技能,并将这些技能提升到世界一流水平. 这些探索肯定会很有

《JavaScript忍者秘籍》——1.2 理解JavaScript语言

1.2 理解JavaScript语言 很多JavaScript程序员,在工作中不断进步,直到能够熟练使用大量的JavaScript语言元素,包括对象.函数(如果他们始终关注编码趋势)甚至是匿名内联函数.然而,在许多情况下,这些技巧可能并没有超出基础水平.此外,这些程序员,通常对JavaScript中闭包(closures)的目的和实现有着非常匮乏的理解,而闭包从根本上例证了函数对于该语言的重要性. JavaScript中,对象.函数和闭包之间有着很密切的关系(如图1.1所示).理解这三个概念之间