卡卡网

调试JavaScript有什么好工具吗？其实如果你有使用Chrome或firefox浏览器，那么这些浏览器都可以调试JavaScript，而不用另外安装工具，既方便又有效率。本文介绍如何在Chrome浏览器中调试JavaScript，其他浏览器也具有类似的操作方法。

“Sources”面板

1. 在Chrome中打开要调试的页面。
2. 使用F12打开开发人员工具。
3. 选择Sources面板。

Sources面板的样子大概这样：

Sources面板（点击图片放大）

点击切换按钮    打开带有文件的标签。

我们单击它，然后选择树视图中的hello.js，显示其中的内容：

选择要调试的js文件（点击图片放大）

“Sources”面板包含3个部分：

1. “文件浏览器”窗格列出了HTML，JavaScript，CSS和其他文件，包括附加到页面的图像。Chrome扩展程序也可能会出现在这里。
2. “代码编辑器”窗格显示源代码。
3. “ JavaScript调试”面板用于调试。

现在您可以单击相同的切换器  再次隐藏资源列表，并给代码留一些空间。

Console（控制台）

如果按Esc，则会在下面打开一个控制台。我们可以在那里键入命令，然后按Enter执行。

执行一条语句后，其结果如下所示。

例如，这里的1+2结果为3，hello("debugger")不返回任何内容，因此结果为undefined。

Console执行js代码（点击图片放大）

Breakpoints（断点）

我们检查示例页面的代码发生了什么，在hello.js中，单击行号4，注意，就在4数字上，而不是在代码上。这样你就设置了一个断点，也请单击行号8。

它看起来应该像这样（蓝色是您单击的位置）：

设置断点执行js代码（点击图片放大）

在代码的断点处，调试器将自动暂停JavaScript的执行。

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

我们可以在右侧面板中找到断点列表，当我们在各种文件中有很多断点时，这很有用。它使我们能够：

1. 快速跳至代码中的断点处（在右侧面板中单击）。
2. 通过取消选中，禁用临时断点。
3. 通过右键单击并选择“删除”来删除断点。
4. …等等。

条件断点

右键单击行号可以创建条件断点，仅在给定表达式为真时触发。

当我们只需要停止某个变量值或某些函数参数时，这很方便。

Debugger command（调试器命令）

我们还可以通过使用其中的debugger命令来暂停代码，如下所示：

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

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

  say(phrase);
}

当我们在代码编辑器中不想切换到浏览器来查找脚本设置断点时，这非常方便。

Pause（暂停调试）

在我们的示例中，hello()在页面加载期间调用，因此激活调试器（设置断点后）的最简单方法是重新加载页面。因此，请按F5（Windows，Linux）或Cmd+R（Mac）。设置断点后，执行将在第四行暂停：

 
暂停调试 （点击图片放大）

请打开右侧的信息性下拉列表（标有箭头）。它们使你可以检查当前的代码状态：

• Watch –显示任何表达式的当前值。
  你可以单击加号+并输入表达式，调试器将随时显示其值，并在执行过程中自动对其进行重新计算。
• Call Stack –显示嵌套的调用链。
  当前，调试器在hello()里内部调同，由index.html的脚本调用（其中没有函数，因此称为“anonymous（匿名）”）。
  如果单击堆栈项（例如“anonymous（匿名）”），调试器将跳转到相应的代码，并且还可以检查其所有变量。
• Scope –当前变量。
  Local 显示局部函数变量，你可以在源代码的正上方看到其值突出显示。
  Global 具有全局变量（任何功能之外）。 

Tracing the execution（追踪执行）

右面板顶部有相应的按钮 “恢复”：继续执行，热键F8。

恢复执行，如果没有其他断点，则执行将继续，调试器将失去控制。

单击后，我们可以看到以下内容：

追踪执行（点击图片放大）

执行已恢复，到达另一个断点say()里面并在那里暂停。看一下右侧的“Call Stack(调用堆栈)，它增加了一个调用say，我们现在在say()里面了。

 –“步骤”：运行下一个命令，热键F9。

运行下一条语句。如果我们现在单击它，alert将显示。

一次又一次地单击此按钮将一步一步地浏览所有脚本语句。

 –“跳过”：运行下一条命令，但不要进入函数hotkey F10。

与上一个“步骤”命令相似，但是如果下一个语句是一个函数调用，则其行为会有所不同。那就是：不是像那样的内置alert函数，而是我们自己的函数。

“ 步骤”命令进入其中并在其第一行暂停执行，而“ 跳过”则无形地执行嵌套函数调用，从而跳过了函数内部，然后在该函数之后立即暂停执行。

如果我们不希望看到函数调用中发生的事情，那就使用“跳过”。

 –“进入”：热键F11。

这类似于“ 步骤”，但是在异步函数调用的情况下行为不同。如果你只是开始学习JavaScript，那么你可以忽略两者之间的区别，因为我们还没有异步调用。

对于将来，只需注意“ 步骤”命令将忽略setTimeout稍后执行的异步动作，例如（预定的函数调用），“进入”进入他们的代码，并在必要时等待他们。

 –“退出”：继续执行直到当前功能结束，热键Shift+F11。

继续执行并将其停止在当前函数的最后一行。当我们不小心使用进入嵌套调用时，这很方便，但我们对此并不感兴趣，我们希望尽快将其结束。

 – 启用/禁用所有断点。

该按钮不会移动执行。只是大量的开/关断点。

 – 启用/禁用发生错误时的自动暂停。

启用后，当开发人员工具打开时，脚本错误将自动暂停执行。然后，我们可以分析变量以查看出了什么问题。因此，如果我们的脚本因错误而死，我们可以打开调试器，启用此选项，然后重新加载页面以查看死于何处。

记录

要从我们的代码输出一些内容到控制台，有console.log功能。

举例来说，如下代码可以输出值0到4到控制台：

// 打开console控制台看看
for (let i = 0; i < 5; i++) {
  console.log("value,", i);
}

trying >>

普通用户看不到该输出，它在控制台中。要查看它，请打开开发人员工具的Console(控制台)面板。

如果我们在代码中记录了足够的日志，则无需调试器就可以查看记录中发生了什么。

概括

本章提供的信息足以调试JavaScript了。

如我们所见，有三种主要方法可以暂停脚本：

1. 断点。
2. 该debugger声明。
3. 错误（如果开发工具已打开，并且按钮是“开启”）。

暂停后，我们可以调试–检查变量并跟踪代码以查看执行错误的地方。

标签: 调试  浏览器