1.7 调试工具

除了学会如何用JavaScript编程外，还需要了解如何调试代码。调试对于找到代码中的错误十分有帮助，也能让你低速执行代码，从而看到所有发生的事情（方法被调用的栈、变量赋值等）。极力推荐你花一些时间学习一下如何调试书中的源代码，查看算法的每一步（这样也会让你对算法有深刻的理解）。

Firefox、Safari、Edge和Chrome都支持调试。有一个了解谷歌开发者工具的好教程，地址是https://developer.chrome.com/devtools/docs/javascript-debugging。

除了你喜好的编辑器外，这里推荐其他几个工具，可以提升编写JavaScript的效率。

❑ WebStorm：这是一个很强大的IDE，支持最新的Web技术和框架。它不是免费的，但你可以下载一个30天试用版本体验一下。

❑ Sublime Text：这是一个轻量级的文本编辑器，可以自定义插件。你可以购买它的许可证来支持这个工具的开发，也可以免费使用（试用版不会过期）。

❑ Atom：这也是一个轻量级的文本编辑器，由GitHub创建。它为JavaScript提供了很好的支持，也可以自定义插件。

❑ Visual Studio Code：这是一个免费、开源的代码编辑器，由微软使用TypeScript开发。它使用IntelliSense提供JavaScript代码自动补全功能，并在编辑器内直接提供了内置的调试功能。同样可以自定义其插件。

上述所有编辑器都同时支持Windows、Linux和Mac OS。

使用VSCode 进行调试

要直接在VSCode中调试JavaScript或ECMAScript代码，首先需要安装Debugger for Chrome扩展。

然后，启动Web Server for Chrome扩展，并在浏览器中打开链接来查看本书的示例代码（默认的URL是http://127.0.0.1:8887/examples）。

下图展示了如何直接在编辑器中进行调试。

(1) 在编辑器中，打开想要调试的JavaScript文件，将鼠标指针移至行号附近，点击添加一个断点（如图中的1所示）。调试器将在这里停止，然后可以对代码进行分析。

(2) 当Web Server启动并运行之后，点击Debug界面（如图中的2所示），选择Chrome（如图中的3所示），并点击运行图标来初始化调试进程。

(3) Chrome将自动启动。导航至我们需要调试代码的示例。一旦调试器搜索到添加了断点的那行代码，进程将停止，编辑器将获取焦点。

(4) 我们可以使用顶部工具栏来控制代码的调试方式（如图中的4所示）。可以选择继续执行，进入方法的调用，跳至下一行代码，以及重新执行或停止执行。这和在Chrome等浏览器中使用调试工具是一样的。

(5) 使用内置调试功能的好处是，我们可以在编辑器中做所有的事情（编写代码、调试和测试）。我们也可以在其中查看声明的变量和调用栈，可以监听变量和表达式（如图中的5所示），可以将鼠标指针悬停在变量上以查看它当前的值（如图中的6所示），还可以查看控制台的输出（如图中的7所示）。

本书的源代码是使用Visual Studio Code开发的，也包含了启动项的配置，所以你可以直接在VSCode中调试和测试代码（所有的细节都包含在．vscode/launch.json文件中）。运行本书源代码时推荐使用的扩展也列在了．vscode/extensions.json文件中。