本节书摘来自异步社区《JavaScript忍者秘籍》一书中的第2章，第2.1节，作者：【美】John Resig（莱西格） , Bear Bibeault（贝比奥特) 译者： 徐涛 更多章节内容可以访问云栖社区“异步社区”公众号查看。
本章涵盖以下内容。
JavaScript代码调试工具测试用例生成技术构建测试套集如何测试异步操作为代码构建有效的测试套件是非常重要的，所以在我们进入任何编码之前，要首先对它进行讨论。和可靠的测试策略同样重要的是要对所有代码进行测试，外部因素有可能影响代码的操作效果这点十分重要，这正是我们在跨浏览器JavaScript开发时要面对的情况。
我们不仅要处理典型问题：确保代码质量，尤其是与多位同时编写一段代码的开发人员打交道时，并避免出现会破坏API的回归错误（所有程序员都需要处理的普通问题），还要处理：判断代码是否在我们选择支持的所有浏览器上都能正常运行。
在讨论第11章的跨浏览器策略时，我们将进一步深入讨论跨浏览器开发问题，但是现在，重要的是要强调测试的重要性和测试策略的定义，因为我们将在本书的剩余部分使用这些策略。
在本章中，我们将了解用于调试JavaScript代码的一些工具和技术，并基于这些结果生成测试用例，并构建测试套件，从而可靠地运行这些测试。让我们开始学习吧。
还记得调试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中，我们首先尝试使用绝大多数现代浏览器都能用的console.log()方法记录日志消息1，如果失败，将会抛出一个异常，然后我们捕获该异常2，继而再尝试使用Opera的专有方法记录该日志消息3。如果这些方法都失败了，我们重新回来使用古老的alert函数4。
注意：代码清单2.1使用了JavaScript Function()构造器的apply()和call()方法接收传递的参数进行日志记录。Function()的这些方法用于帮助我们进行精确控制JavaScript函数的调用，在第3章，我们将会看到更多相关内容。在代码运行时，通过记录日志查看程序运行状态是很好的做法，但有时我们要暂停代码的运行，并需要查看一下此时的相关信息。
这就是断点要做的。
2.1.2 断点断点（breakpoint）是一个比日志记录更复杂的概念，但它比日志有一个更显著的优势：它能在特定的代码上暂停脚本的执行，从而暂停浏览器运行。这使得我们可以在该断点处，随意查看任意代码的状态。其中包括所有可访问的变量、上下文以及作用域链。
如下所示，假设有一个页面，使用我们的新log()方法记录日志。
代码清单2.2 使用自定义log()方法的简单页面
如果我们使用Firebug在代码清单2.2的注释行1设置一个断点（在脚本显示的行号上进行单击），刷新页面重新执行代码，调试器就会在这一行停止执行，并向我们展示图2.2所示的效果。
注意，右边的窗格允许我们查看代码运行的状态，包括x的值。调试器会在实际要执行的断点前暂停执行；在本例中，log()方法还没有被执行。
如果我们想使用新方法进行调试，可以单步执行该方法，一探究竟。单击“进入（step into）”按钮（最左边的黄金箭头按钮）可以让调试器开始执行新方法的第一行，然后我们会看到图2.3所示的内容。注意显示的状态已经改变，从而让我们可以查看log()方法执行的新状态。
任何具有断点功能的全功能调试器都高度依赖于执行该调试器的浏览器环境。鉴于这个原因，上述开发者工具才会被创建；否则，它们的功能也不会实现。这是一个对整个Web开发社区的伟大贡献和救济，所有主流的浏览器实现者都可以创建有效的实用工具程序以便调试。
调试代码不仅符合其主要和明显目的（检测并修复bug），而且也可以帮助我们获取当前生成高效测试用例的最佳实践。
相关资源：敏捷开发V1.0.pptx