在浏览器中调试

在编写更复杂的代码前，让我们先来聊聊调试吧。

调试是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具 —— 开发者工具中的一个令调试更加容易的特殊用户界面。它也可以让我们一步步地跟踪代码以查看当前实际运行情况。

在这里我们将会使用 Chrome（谷歌浏览器），因为它拥有足够多的功能，其他大部分浏览器的功能也与之类似。

“资源（Sources）”面板

你的 Chrome 版本可能看起来有一点不同，但是它应该还是处于很明显的位置。

如果你是第一次这么做，那你应该会看到下面这个样子：

切换按钮会打开文件列表的选项卡。

让我们在预览树中点击和选择 hello.js。这里应该会如下图所示：

资源（Sources）面板包含三个部分：

文件导航（File Navigator） 区域列出了 HTML、JavaScript、CSS 和包括图片在内的其他依附于此页面的文件。Chrome 扩展程序也会显示在这。
代码编辑（Code Editor） 区域展示源码。
JavaScript 调试（JavaScript Debugging） 区域是用于调试的，我们很快就会来探索它。

现在你可以再次点击切换按钮隐藏资源列表来给代码腾出一些空间。

如果我们按下 Esc，下面会出现一个控制台，我们可以输入一些命令然后按下 Enter 来执行。

语句执行完毕之后，其执行结果会显示在下面。

例如，1+2 将会返回 3，而 hello("debugger") 函数调用什么也没返回，所以结果是 undefined：

我们来看看示例页面发生了什么。在 hello.js 中，点击第 4 行。是的，就点击数字 "4" 上，不是点击代码。

恭喜你！你已经设置了一个断点。现在，请在第 8 行的数字上也点击一下。

看起来应该是这样的（蓝色是你应该点击的地方）：

断点是调试器会自动暂停 JavaScript 执行的地方。

当代码被暂停时，我们可以检查当前的变量，在控制台执行命令等等。换句话说，我们可以调试它。

我们总是可以在右侧的面板中找到断点的列表。当我们在数个文件中有许多断点时，这是非常有用的。它允许我们：

在行号上 右键单击 允许你创建一个条件断点。只有当给定的表达式（你创建条件断点时提供的表达式）为真时才会被触发。

当我们需要在特定的变量值或参数的情况下暂停程序执行时，这种调试方法就很有用了。

我们也可以使用 debugger 命令来暂停代码，像这样：

          function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 调试器会在这停止

  say(phrase);
}
        

这样的命令只有在开发者工具打开时才有效，否则浏览器会忽略它。

在我们的例子中，