Skip to main content

一些有用的 JavaScript 调试技巧

· 14 min read

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

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

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

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

下文将为你一一揭晓。

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

1_app_error.png

一、了解 Sources 面板​

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

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

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

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

2_know_source.png图

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

3_know_source_sections.png图

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

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

4_source_wide.png图

二、设置断点​

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

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

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

主要包括以下 4 种方式：

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

1. 在代码行设置断点​

设置代码行断点：

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

5_line_of_code.png图

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

2. 设置条件断点​

设置条件断点：

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

6_add_conditional_1.png图

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

'6_add_conditional_2.png图'

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

6_add_conditional_3.png图

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

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

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

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

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

8_Event_listener_breakpoint.png图

4. 在 DOM 节点处设置断点​

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

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

要在 DOM 更改上设置断点：

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

7_DOM_breakpoint.png图

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

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

三、逐步执行源代码​

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

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

9_debug_controls.png图

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

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

f9_step.gif图

2. 跳过（快捷键 - F10）​

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

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

f10_step_over.gif图

3. 进入（快捷键 - F11）​

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

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

F11_step_into.gif图

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

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

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

shift_F11_step_out.gif图

5. 跳转（快捷键 - F8）​

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

F8_run_jump.gif图

6. 禁用和删除断点​

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

disable_bp.png图

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

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

11_remove_all_bp.png图

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

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

1. 范围​

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

9_scope.png图

2. 调用堆栈​

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

9_call_stack.png图

3. 值​

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

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

9_see_values.png图

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

9_see_values_2.png图

4. Watch​

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

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

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

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

10_watch_1.png图

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

10_watch_2.png图

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

10_watch_3.png图

五、使用 Visual Studio Code 调试 JavaScript​

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

1. 用于调试的 VS Code 设置​

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

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

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

图像.png图

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

图像.png图

  • 将创建一个名为 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 等文件所在的入口点文件夹。
  • 最后一步是通过单击左上角的小播放图标开始调试。

图像.png图

2. 了解调试器面板​

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

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

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

vs_code_frame.png图

3. 快速演示​

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

总结​

总结一下：

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

往期精彩​