JavaScript 调试

没有调试工具是很难去编写 JavaScript 程序的。

你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。

通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难，但幸运的是，很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。

有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。

设置断点

要开始调试代码，首先要做的就是设置断点，断点就是代码执行暂停以便调试它的逻辑点。

DevTools 允许我们以不同的方式来设置断点：

• 在代码行；
• 在条件语句中；
• 在 DOM 节点处；
• 在事件侦听器上。

debugger 关键字

debugger 关键字用于停止执行 JavaScript，并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用，debugger 语句将无法工作。

开启 debugger ，代码在第三行前停止执行。

在代码行设置断点

设置代码行断点的步骤：

• 单击切换到 Sources 选项卡；
• 从文件导航部分选中需要调试的源文件；
• 在右侧代码编辑器区域找到需要调试的代码行；
• 单击行号以在行上设置断点。
  

这里就在代码的第6行设置了一个断点，代码在执行到这里时就会暂停。

设置条件断点

设置条件断点的步骤：

• 单击切换到 Sources 选项卡；
• 从文件导航部分选中需要调试的源文件；
• 在右侧代码编辑器区域找到需要调试的代码行；
• 右键单击行号并选择"Add conditional breakpoint"来添加条件断点：
  
  点击之后代码行下方就会出现一个对话框，输入断点的条件即可：
  
  当print()方法中的name变量值为Joe时，代码的执行就会暂停。需要注意，只有我们确定调试的代码的大致范围时，才会使用条件断点。

在事件监听器上设置断点

在事件监听器上设置断点的步骤：

• 单击切换到 Sources 选项卡；
• 在debugger区域展开Event Listener Breakpoints选项；
• 从事件列表中选择事件监听器来设置断点。我们的程序中有一个按钮单击事件，这里就选择 Mouse - 事件选项中的click。
  

提示：当我们想暂停在事件触发后运行的事件侦听器代码时可以使用此选项。

在 DOM 节点中设置断点

DevTools 在 DOM 检查和调试方面同样很强大。当在 DOM 中添加、删除或者修改某些内容时，可以设置断点来暂停代码的执行。
在 DOM 上设置断点的步骤：

单击切换到 Elements 选项卡；
找到要设置断点的元素；
右键单击元素以获得上下文菜单，选择Break on选项，然后选择Subtree modifications、Attribute modifications、Node removal中的一个即可：

这三个选项的含义如下：

• Subtree modifications：当节点内部子节点变化时断点；
• Attribute modifications：当节点属性发生变化时断点；
• Node removal：当节点被移除时断点。

​
如上图，我们在输出消息的 div 的 DOM 发生变化时设置了一个断点。当点击按钮后，问候消息输出到 div 中，子节点的内容发生了变化，就会发生中断。
​
注意： 当我们怀疑是DOM更改导致了错误时，就可以使用该选项，当 DOM 更改中断时，相关的 JavaScript 代码执行将自动暂停。

逐步调试

现在我们知道了设置断点的方式。在复杂的调试情况下，我们可能需要使用这些调试的组合。调试器提供了五个控件来逐步执行代码：

检查范围、调用堆栈和值

当进行逐行调试时，检查变量的范围和值以及函数调用的调用堆栈。在Debugger区可以这三个选项：