JavaScript 调试权威指南 [2021 版] 简介 今天我们要调试什么？ 了解源码面板 设置断点 单步执行源代码 检查作用域、调用堆栈和值 观察禁用和移除断点 最后修复 使用 Visual Studio Code 调试 JavaScript 理解调试器面板 快速演示 总结

2025-05-24

JavaScript 调试权威指南 [2021 版]

介绍

我们今天要调试什么？

了解来源面板

设置断点

逐步执行源代码

检查范围、调用堆栈和值

让我们一起观看

禁用和删除断点

最后，修复

使用 Visual Studio Code 调试 JavaScript

了解调试器面板

快速演示

概括

介绍

作为开发人员，我们传统上会使用有意义的语句来根除程序中的错误（bugs如果可以的话，以后我们会调用它们）log。JavaScript 有一个著名的console.log()方法可以做到这一点。

虽然日志语句很好，但它们的效率不如能够逐步调试的工具。因此，在本文中，我们将学习如何使用Google Chrome developer tools（也称为DevTools）轻松调试任何 JavaScript 应用程序。

使用 DevTools 的一大优势在于，其他浏览器厂商（例如 Firefox 和 Microsoft）也提供了各自的 JavaScript 应用调试工具，并且这些工具的工作方式也类似。因此，一旦我们学会了如何在一个浏览器上使用调试工具，在另一个浏览器上使用也同样简单。

我们今天要调试什么？

看看这个Greet Me应用程序。这个 JavaScript 应用程序会询问您的姓名，并邀请您提交一个“愿望”，以便向您发送个性化的问候。

1_app_error.png
图 1：Greet Me 应用显示错误

但是等等，这里有个问题。问候信息没有正确打印愿望部分。它插入了一个乱码单词 。NaN还好，Chrome DevTools 可以帮助我们识别这个问题。

如果您想尝试以下提供的技巧，可以在https://greet-me-debugging.vercel.app/找到 Greet Me 应用程序。您也可以从 GitHub 克隆应用程序代码并在本地运行。

了解来源面板

DevTools提供了许多不同的工具来执行调试任务，包括 DOM 检查、性能分析和网络调用检查。但我们现在感兴趣的是面板Sources，它可以帮助我们调试 JavaScript。

您可以通过按下F12键或使用快捷键打开 DevTools：Control+Shift+I（Windows、Linux）或 Command+Option+I（Mac）。点击Sources标签页即可导航至Sources面板。

2_know_source.png
图 2：打开源面板

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

3_know_source_sections.png
图 3：来源面板部分

  1. File Navigator Section：我们的“欢迎我”页面请求的所有文件都列在这里。
  2. Code Editor Section：当您从导航窗格中选择一个文件时，该文件的内容将在此处列出。我们也可以从这里编辑代码。
  3. Debugger Section：您将在这里找到许多可用于设置断点、检查变量值、观察变化等的工具。

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

4_source_wide.png
图 4：DevTool 窗口完全打开

设置断点

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

断点是您希望代码执行暂停的逻辑点，以便您可以对其进行调试。

DevTools允许你以多种不同的方式设置断点。当我们开始调试应用程序时，我们将学习如何设置它们……

  • 在代码行。
  • 在条件语句中。
  • 在 DOM 节点处。
  • 关于事件监听器。

在代码行设置断点

要设置代码行断点：

  • 单击“源”选项卡。
  • 从文件导航部分浏览源文件。
  • 转到右侧代码编辑器部分中的代码行。
  • 点击行号列可以在某一行设置断点。

5行代码.png
图 5：设置代码行断点

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

Tips：当您不知道要调查的代码的确切区域时，请使用此选项。即使您只是根据猜测从某个地方开始，最终也会导致错误。您还可以设置多个代码行断点并进行调查。我们将在本文的后半部分看到这一点。

设置条件断点

设置条件断点：

  • 单击“源”选项卡。
  • 从文件导航部分浏览源文件。
  • 转到右侧代码编辑器部分中的代码行。
  • 右键单击行号并选择添加条件断点选项。

6_add_conditional_1.png
图 6a：右键单击行号

  • 代码行下方会出现一个对话框。开始输入条件。输入过程中，您会看到自动完成选项，提示您选择一个条件。

6_add_conditional_2.png
图 6b：输入条件

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

6_add_conditional_3.png
图 6c：条件断点已激活

print()每当使用名称调用该函数时，代码执行都会暂停Joe。

提示：当您知道需要调查的具体代码区域时，请使用条件断点。由于您可能知道代码区域，因此您可以使用条件进一步检查以找出问题的根本原因。

在事件监听器上设置断点

要在事件侦听器上设置断点：

  • 单击该Sources选项卡。
  • 展开Event Listener Breakpoints窗格debugger section。
  • 从类别列表中选择事件监听器列表来设置断点。我们的应用程序中有一个按钮点击事件。我们将尝试选中选项click下方的复选框mouse。

8_事件监听器断点.png
图 7：在点击事件监听器上设置断点

提示：当您想要暂停事件触发后运行的事件监听器代码时使用此功能。

在 DOM 节点设置断点

DevTools在 DOM 检查和调试方面同样强大。您可以设置断点，以便在 DOM 中添加、删除或更改某些内容时暂停代码执行。

要在 DOM 更改时设置断点：

  • 单击该Elements选项卡。
  • 转到要设置断点的元素。
  • 右键单击元素以获取上下文菜单。选择，然后选择、或Break on之一。Subtree modificationsAttribute modificationsNode removal

7_DOM_断点.png
图 8：在 DOM 更改处添加断点

如上图所示，我们在输出 DIV 的 DOM 变化处设置了一个断点，并设置了Subtree修改条件。我们知道，一条问候消息将被添加到输出 DIV 中，并且子树将被修改以在此情况下中断。

提示：当您怀疑 DOM 更改导致了错误时，请使用此选项。当 DOM 更改导致 JavaScript 代码执行中断时，相关的 JavaScript 代码执行将自动暂停。

逐步执行源代码

现在我们已经了解了设置断点的所有重要方法。在复杂的调试情况下，你可能需要组合使用它们。让我们看看如何单步执行断点来解决问题。

调试器部分提供了五个控件来逐步执行代码。

9. 调试控件
图 9：逐步控制

步骤（快捷键 - F9）

此选项允许您在 JavaScript 代码执行时逐行单步执行。如果执行过程中有函数调用，单步执行还会进入函数内部，逐行执行，然后跳出函数。

f9_步骤.gif
图 9a：逐行执行步骤

跨过（快捷键 - F10）

此选项允许您在不进入函数的情况下执行该函数。有时，您可能确定某些函数运行正常，但不想花时间检查它们。在这种情况下，您应该使用step over。

在下面的例子中，我们正在跨过该logger()函数。

f10_跨步.gif
图 9b：Step Over 函数

进入（快捷键 - F11）

使用此选项可以更深入地调查某个函数。单步执行时，您可能会感觉到某个函数的行为异常，并想要对其进行检查。使用此选项step into可以深入函数内部并进行调试。

在下面的例子中，我们正在进入函数logger()。

F11_步入.gif
图 9c：进入下一个函数调用

退出（快捷键 - Shift + F11）

单步执行某个函数时，您可能不想继续执行并退出该函数。使用此选项可以单步执行该函数。

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

shift_F11_步出.gif
图 9d：跳出当前函数

恢复/跳转（快捷键 - F8）

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

F8_奔跑_跳跃.gif
图 9e：恢复或跳转到下一个断点

检查范围、调用堆栈和值

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

范围

你可以通过面板来查看全局作用域中的内容及其变量scope。你还可以查看关键字的值this。

9_范围.png
图 10a：范围面板

调用堆栈

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

9调用堆栈
图 10b：调用堆栈

价值观

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

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

9_see_values.png
图 10c：使用鼠标悬停检查值

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

9_see_values_2.png
图 10d：检查表达式的值

让我们一起观看

该Watch部分允许您添加一个或多个表达式并在执行时观察它们的值。当您想在代码逻辑之外进行一些计算时，此功能非常有用。

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

以下是添加监视所需的步骤：

  • 点击“观看”部分上方的 + 图标

10_watch_1.png
图 11a：添加监视表达式

  • 添加要监视的表达式。在此示例中，我们添加了一个变量，希望监视其值。

10_watch_2.png
图 11b：观察表达式值

另一种监视表达式的方法是通过控制台抽屉。请参阅下面的示例以了解如何激活它。

10_watch_3.png
图 11c：激活控制台抽屉

禁用和删除断点

要一次禁用所有断点，请单击“停用断点”按钮（如下图所示）。

disable_bp.png
图 12a：禁用所有断点

请注意，上述方法不会移除断点，只是会在您需要的时长内停用它们。要激活断点breakpoints，请再次点击同一按钮。

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

删除所有bp
图 12b：删除一个、多个或所有断点

最后，修复

综上所述，你认为该如何修复才能让Greet Me应用正常运行呢？你已经找到解决办法了吗？

如果没有，它只是在构造时在变量+前面添加的额外内容。wishmessage

// This is the line where the issue is.
// Identify the extra '+' before the wish.
const message = 'Hello ' 
                        + name 
                        + ', Your wish `' 
                        + + wish 
                        + '` may come true!';
Enter fullscreen mode Exit fullscreen mode

在实际的调试场景中，我们该如何找到这个方法呢？可以看看这个简短的视频演示（无音频）。


JS 调试：修复“Greet Me”应用

您也可以从这里试用修复后的版本。

使用 Visual Studio Code 调试 JavaScript

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

用于调试的 VS Code 设置

VS Code 有多个扩展程序（类似插件），可用于启用各种特性和功能。要启用 JavaScript 调试，您需要安装一个名为 的扩展程序Debugger for Chrome。您可以通过以下任一方式安装它：

  • 前往Chrome 调试器主页，然后点击“安装”按钮。这将启动 VS Code 并自动开始安装。
  • 您可以在 VS Code 的扩展面板中搜索此扩展并安装它。

图像.png
图 13a：VS Code 扩展安装

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

图像.png
图 13b：通过配置启用调试

  • 将会创建一个名为 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}"
        }
    ]
  }
Enter fullscreen mode Exit fullscreen mode

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

  1. name：任何适合您的应用的名称。可以选择更改。
  2. url：您的应用程序在本地运行的 URL。
  3. webRoot：默认情况下，值为 ${workspaceFolder}，即当前文件夹。您可能需要将其更改为 index.html 等文件所在的入口点文件夹。
    • 最后一步是单击左上角的小播放图标开始调试。

图像.png
图13c：开始调试

了解调试器面板

VS Code 提供了类似的 JavaScript 调试工具DevTools。您会发现它与我们之前在本文中介绍的 Google Chrome JavaScript 调试器有很多相似之处。以下是您应该了解的主要部分：

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

vs_code_frame.png
图 13d：VS Code 调试控件的剖析

快速演示

这是一个快速演示（1 分钟）来展示 VS Code 调试控制用法。


VS Code 调试

概括

总而言之，

  • 使用工具来调试 JavaScript 代码总是更好的选择。像 Google ChromeDevTools或VS Code调试器扩展程序这样的工具比仅仅依赖console.log().
  • DevToolsSource Panel功能非常强大，具有检查变量值、监视表达式、了解范围、读取调用堆栈等功能。
  • 设置方法有多种breakpoints，需要根据调试情况来使用。
  • 使用 管理断点很简单DevTools。
  • 该VS Code debugger扩展同样功能强大，值得尝试。

就到这里吧。非常感谢你的阅读，希望这篇文章对你有所帮助。祝你调试愉快！欢迎在Twitter 上与我联系（@tapasadhikary）。

文章来源：https://dev.to/atapas/the-definitive-guide-to-javascript-debugging-2021-edition-116n
Devto 翻译
PREV
如何使用 JavaScript 显示桌面通知
NEXT
JavaScript object destructuring usages you must know 2, agree but when you see the entire dev ecosystem(like with React I see) using it, I think, it is better to contribute that way.