一些有用的 JavaScript 调试技巧（二）

日常开发工作中，我们常用到 console.log() 调试 Javascript，使用 console.log() 需要不断的修改源码来调试，非常麻烦。

本文将介绍另一个可以高效调试 Javascript 的工具 -- 浏览器开发者工具（DevTools）。

下图是一个表单模块，当输出不符合期望时，怎么使用 DevTools 去调试，发现并解决问题呢？

下文将为你一一揭晓。

在线调试代码地址： greet-me-debugging.vercel.app 。

一、了解 Sources 面板

DevTools 提供了许多不同的工具来执行调试任务，包括 DOM 检查、分析和网络调用检查。

首先介绍的是 Sources 面板，它可以帮助我们调试 JavaScript。

你可以通过按键 F12 或使用快捷键打开 DevTools：Control+Shift+I（Windows、Linux）或 Command+Option+I（Mac）。

单击 Sources 选项卡以导航到 Sources 面板。

该 Sources 面板具有三个主要部分。

1. 文件导航区：页面请求的所有文件都在此处列出；
2. 编辑区：当你从导航窗格中选择一个文件时，该文件的内容将在此处列出。我们也可以从这里编辑代码；
3. 调试区： 你会发现这里有很多工具可以用来设置断点、检查变量值、观察变化等。

如果你的 DevTools 窗口较宽或未停靠在单独的窗口中，则调试器部分将显示在代码编辑器窗格的右侧。

二、设置断点

要开始调试，首先要做的是设置断点。

断点是你希望代码执行暂停以便调试它的逻辑点。

DevTools 允许你以多种不同的方式设置断点。

主要包括以下 4 种方式：

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

1. 在代码行设置断点

设置代码行断点：

• 单击 Sources tab；
• 从文件导航区浏览源文件；
• 转到右侧代码编辑器区中的代码行；
• 单击行号列以在行上设置断点。

这里我们在第 6 行设置了一个断点，代码执行将在这里暂停。

2. 设置条件断点

设置条件断点：

• 单击 Sources tab；
• 从文件导航区浏览源文件；
• 转到右侧代码编辑器区中的代码行；
• 右键单击行号并选择添加条件断点选项。

代码行下方会出现一个对话框，开始输入条件。

按 Enter 激活断点，你应该会看到一个橙色图标出现在行号列的顶部。

print() 执行时，只要满足 name === Joe 条件，代码将暂停执行。

提示：当你知道要调查的特定代码区域时，可以使用条件断点进一步检查以找到问题的根本原因。

3. 在事件监听器上设置断点

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

• 单击 Sources tab；
• 展开 Event Listener Breakpoints；
• 从事件监听器列表选择 click 事件来设置断点。

4. 在 DOM 节点处设置断点

DevTools 在 DOM 检查和调试方面同样强大。

当在 DOM 中添加、删除或更改某些内容时，你可以设置断点来暂停代码执行。

要在 DOM 更改上设置断点：

• 单击 Elements 选项卡。
• 选择要设置断点的元素。
• 右键单击元素以获取上下文菜单。选择 Break on，然后选择 Subtree modifications、Attribute modifications、Node removal 其中一个。

如上图所示，我们在 div 节点的更改上设置了一个断点，条件是 Subtree 修改。

当问候消息被添加到输出 div 时，代码将暂停执行。

三、逐步执行源代码

现在我们知道了设置断点的所有重要方法，接下来让我们看看如何通过断点来解决问题。

调试器区提供了 5 个控件来逐步执行代码。

1. 下一步（快捷键 - F9）

此选项使你能够在 JavaScript 代码执行时逐行执行。如果途中有函数调用，单步执行也会进入函数内部，逐行执行，然后退出。

2. 跳过（快捷键 - F10）

有时，你可能确定某些功能工作正常，不想花时间检查它们。此选项允许你在不单步执行功能的情况下执行该功能。

在下面的示例中，我们跳过了 logger() 函数的执行。

3. 进入（快捷键 - F11）

单步执行时，你可能会感觉某个函数的行为异常并想要检查它。使用此选项可以更深入地研究函数。

在下面的示例中，我们正在单步执行函数 logger()。

4. 跳出（快捷键 – Shift + F11）

在单步执行一个函数时，你可能不想继续并退出它。使用此选项可退出函数。

在下面的示例中，我们进入 logger() 函数内部，然后立即退出。

5. 跳转（快捷键 - F8）

有时，你可能希望从一个断点跳转到另一个断点，而无需在其间调试任何代码。使用此选项跳转到下一个断点。

6. 禁用和删除断点

要一次禁用所有断点，请单击“停用断点”按钮（在下方圈出。）

请注意，上述方法不会删除断点。它只是在你需要的时间内停用它们。要激活breakpoints，请再次单击相同的按钮。

你可以通过取消选中复选框从“断点”面板中删除一个或多个断点。你可以通过右键单击并选择 Remove all breakpoints 选项来永久删除所有断点。

四、检查范围、调用堆栈和值

当你逐行调试时，你可以检查变量的范围和值以及函数调用的调用堆栈。

你可以在 scope 选项中查看全局变量及 this 指向。

2. 调用堆栈

调用堆栈面板有助于识别函数执行堆栈。

检查值是识别代码中的错误的主要方法。单步执行时，你只需将鼠标悬停在变量上即可检查值。

在下面的示例中，我们选择变量 name 以在代码执行阶段检查其值。

此外，你可以选择代码的一部分作为表达式来检查值。在下面的示例中，我们选择了一个表达式 document.getElementById('m_wish') 来检查值。

4. Watch

Watch 选项使你能够添加一个或多个表达式并在执行时观察它们的值。当你想要在代码逻辑之外进行一些计算时，此功能非常有用。

你可以组合代码区域中的任何变量并形成有效的 JavaScript 表达式。在单步执行时，你将能够看到表达式的值。

以下是添加 Watch 所需的步骤：

• 单击 Watch 部分上方的 + 图标

• 添加要 Watch 的表达式。在这个例子中，我们添加了一个希望观察其值的变量。

另一种监听表达式的方法是在控制台里输入表达式。请参阅下面的示例以了解如何激活它。

五、使用 Visual Studio Code 调试 JavaScript

你最喜欢的代码编辑器是什么？就个人而言，我喜欢 Visual Studio 代码，因为它很简单。只需几个简单的步骤，我们就可以使用 VS Code 启用类似的调试环境。

1. 用于调试的 VS Code 设置

VS Code 支持安装插件来启用各种特性和功能。

要启用 JavaScript 调试，你需要安装一个名为 Debugger for Chrome 的插件。

你可以在 VS Code 的 Extensions 面板中搜索此扩展并安装它。

• 安装后，单击左侧的 Run 选项并创建配置以运行/调试 JavaScript 应用程序。

• 将创建一个名为 launch.json 的文件，其中包含一些设置信息。它可能看起来像这样：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: <https://go.microsoft.com/fwlink/?linkid=830387>
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "Debug the Greet Me app",
          "url": "<http://localhost:5500>",
          "webRoot": "${workspaceFolder}"
      }
  ]
}

你可能需要更改以下参数：

1. name：项目名称。
2. url：项目在本地运行的 URL。
3. webRoot：默认值为 ${workspaceFolder}，即当前文件夹。你可能希望将其更改为 index.html 等文件所在的入口点文件夹。

• 最后一步是通过单击左上角的小播放图标开始调试。

2. 了解调试器面板

VS Code 提供了类似 DevTools 的工具来调试 JavaScript。你会发现与我们目前在本文中看到的 Google Chrome JavaScript 调试器有很多相似之处。

以下是你应该注意的主要部分：

1. 启用调试。按播放按钮启用调试选项。
2. 用于单步执行断点以及暂停或停止调试的控件。这与我们在 Chrome DevTools 中看到的几乎相似，只是某些键盘快捷键可能有所不同。
3. 在源代码上设置断点。这是相似的。
4. 范围面板查看变量范围和值。这些在两种情况下都是完全一样的。
5. 用于创建和监视表达式的监视面板。
6. 执行函数的调用栈。
7. 要启用、禁用和删除的断点列表。
8. 调试控制台读取控制台日志消息。

3. 快速演示

这是一个快速演示（1 分钟），展示了 VS Code 调试控件的用法： https://www.youtube.com/watch?v=xKkrKS77PIY 。

总结一下：

• 使用工具来调试 JavaScript 代码总是更好。像 Google ChromeDevTools 或 VS Code 调试器扩展这样的工具比仅仅依靠 console.log() 调试效率更高；
• DevToolsSource Panel 非常强大，能够检查变量值、观察表达式、理解范围、读取调用堆栈等；
• 有几种设置方式断点，我们应该根据调试情况使用它们；
• VS Code debugger 扩展程序功能非常强大。

本文翻译自 Tapas Adhikary 的原创文章。

• 作者：Tapas Adhikary
• 译者：清汤饺子
• 原文链接： https://blog.greenroots.info/the-definitive-guide-to-javascript-debugging-2021-edition