JavaScript 调试参考文档

Kayce Basques

Twitter GitHub Glitch

Sofia Emelianova

GitHub

阅读这份关于 Chrome 开发者工具调试功能的综合参考文档，探索新的调试工作流。

如需了解调试方面的基础知识，请参阅在 Chrome 开发者工具中调试 JavaScript 入门。

使用断点暂停代码

设置断点，以便您可以在代码执行过程中暂停代码。如需了解如何设置断点，请参阅使用断点暂停代码。

暂停时检查值

执行暂停时，调试程序会评估当前函数中的所有变量、常量和对象，直到某个断点为止。调试程序以内嵌方式显示在相应声明旁边的当前值。

您可以使用控制台查询已评估的变量、常量和对象。

要点：执行暂停时，您还可以重启当前函数，甚至对其进行实时修改。

在悬停鼠标时预览类/函数属性

暂停执行后，将鼠标悬停在类或函数名称上即可预览其属性。

单步调试代码

代码暂停后，请以一次一个表达式的方式单步调试，调查整个过程中的控制流和属性值。

单步调试代码行

在代码行暂停时，如果代码行包含与您要调试的问题无关的函数，请点击 Step over 图标 以执行该函数而不进入该函数。

例如，假设您要调试以下代码：

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

你的暂停服务将于 A暂停。按 Step over 后，开发者工具会执行您要单步的函数（即 B 和 C）中的所有代码。然后，开发者工具会在 D 时暂停。

单步进入代码行

在包含与您正在调试的问题相关的函数调用的代码行上暂停时，请点击 Step into 图标 以进一步调查该函数。

例如，假设您要调试以下代码：

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

你的暂停服务将于 A暂停。按 Step into 按钮，开发者工具会执行这行代码，然后在 B 处暂停。

单步退出代码行

在与您正在调试的问题无关的函数内暂停时，请点击 Step out 图标 以执行函数的其余部分。

例如，假设您要调试以下代码：

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

你的暂停服务将于 A暂停。通过按 Step out，开发者工具会执行 getName() 中的其余代码（在此示例中为 B），然后在 C 处暂停。

运行特定行之前的所有代码

调试一个长函数时，可能会有很多与您要调试的问题无关的代码。

您可以浏览所有代码，但过程可能很繁琐。您可以在关注的代码行上设置代码行断点，然后按 Resume Script Execution 图标 键，但有一种更快的方法。

右键点击您感兴趣的代码行，然后选择 Continue to here。开发者工具会运行该时间点之前的所有代码，然后在该行暂停。

继续执行脚本

如需在暂停后继续执行脚本，请点击 Resume Script Execution 图标 。开发者工具会一直执行此脚本，直到出现下一个断点（如果有）。

强制执行脚本

如需忽略所有断点并强制脚本继续执行，请点击并按住 Resume Script Execution 图标 ，然后选择强制执行脚本 。

更改线程上下文

使用 Web 工作器或 Service Worker 时，点击 Threads 窗格中列出的上下文以切换到该上下文。蓝色箭头图标表示当前选择的上下文。

上方屏幕截图中的 Threads 窗格有蓝色轮廓。

例如，假设您在 main 脚本和 Service Worker 脚本中的断点处已暂停。您想要查看 Service Worker 上下文的本地和全局属性，但“Source”面板显示的是主脚本上下文。通过点击 Threads 窗格中的 Service Worker 条目，您可以切换到该上下文。

逐步执行以英文逗号分隔的表达式

要点：从 Chrome 108 版开始，Debugger 可以单步调试以分号分隔 (;) 和逗号分隔 (,) 的表达式。

通过逐步浏览以英文逗号分隔的表达式，您可以调试缩减后的代码。例如，考虑以下代码：

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

缩减后，会包含以英文逗号分隔的 foo(),foo(),42 表达式：

function foo(){}function bar(){return foo(),foo(),42}bar();

Debugger 以相同的方式逐步检查这些表达式。

因此，步进行为是相同的：

• 在缩减的代码和编写的代码之间。
• 使用源代码映射根据原始代码调试缩减的代码时。 换言之，当您看到分号时，即使要调试的实际源代码已被缩减，也始终需要对其进行单步调试。

查看和修改局部属性、闭包属性和全局属性

在代码行暂停时，使用 Scope 窗格查看和修改局部作用域、闭包和全局作用域中的属性值。

• 双击属性值可进行更改。
• 非枚举属性呈灰显状态。

上方屏幕截图中的 Scope 窗格有蓝色轮廓。

查看当前调用堆栈

在某行代码上暂停时，使用 Call Stack 窗格查看将您转到该位置的调用堆栈。

点击任一条目，即可跳转到调用该函数的代码行。蓝色箭头图标表示开发者工具当前突出显示的函数。

上方屏幕截图中的 Call Stack 窗格有蓝色轮廓。

注意：如果未在某行代码上暂停，Call Stack 窗格将为空。

重启调用堆栈中的函数（帧）

如需观察某个函数的行为并重新运行它，而无需重启整个调试流程，您可以在该函数暂停时重新开始执行单个函数。换言之，您可以在调用堆栈中重启函数的帧。

如需重启某个帧，请执行以下操作：

1. 在断点处暂停函数执行。Call Stack 窗格会记录函数调用的顺序。

2. 在 Call Stack 窗格中，右键点击某个函数，然后从下拉菜单中选择 Restart frame。

   

   注意：您可以重启 Call Stack 中的任何函数帧，但 WebAssembly、异步和生成器函数除外。

如需了解 Restart frame 的工作原理，请考虑以下代码：

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

foo() 函数将 0 作为参数，记录它，并调用 bar() 函数。bar() 函数会依次递增参数。

请尝试通过以下方式重启这两个函数的帧：

1. 将上面的代码复制到新的代码段，然后运行它。执行会在 debugger 代码行断点处停止。
   注意：暂停执行后，请勿以编程方式更改调用堆栈帧的顺序。这可能会导致意外错误。
2. 请注意，调试程序会在函数声明旁边显示当前值：value = 1。
3. 重启 bar() 帧。
4. 按 F9 逐步执行值递增语句。 请注意，当前值会增加：value = 2。
5. （可选）在 Scope 窗格中，双击相应的值进行修改，然后设置所需的值。

6. 请尝试重启 bar() 帧，并多次单步执行增量语句。该值持续增加。

   要点：为什么值未重置为 0？

帧重启不会重置参数。换句话说，重启不会恢复函数调用时的初始状态。而是直接将执行指针移至函数的开头。

因此，即使同一函数多次重启，当前参数值也会保留在内存中。

1. 现在，在 Call Stack 中重启 foo() 帧。 请注意，该值再次为 0。
   要点：为什么该值会重置为 0？

在 JavaScript 中，对参数所做的更改不会在函数之外可见（反映）。嵌套函数接收值，而不是它们在内存中的位置。1. 继续执行脚本 (F8) 以完成本教程。

显示已列入忽略列表的帧

默认情况下，Call Stack 窗格仅显示与您的代码相关的帧，并省略添加到 Settings > Ignore List 的所有脚本。

如需查看完整的调用堆栈（包括第三方帧），请启用 Call Stack 部分下的 Show ignore-listed Frameworks。

请在此演示页面上试用：

1. 在 Sources 面板中，打开 src > app > app.component.ts 文件。
2. 在 increment() 函数中设置断点。
3. 在 Call Stack 部分中，勾选或取消选中 Show ignore-listed Frameworks 复选框，然后观察调用堆栈中的相关或完整的帧列表。

查看异步帧

如果您使用的框架支持，则开发者工具可以通过将异步代码的两个部分链接在一起来跟踪异步操作。

在这种情况下，调用堆栈会显示整个通话记录，包括异步调用帧。

要点：开发者工具根据 console.createTask() API 方法实现此“异步堆栈标记”功能。实现 API 取决于框架。 例如，Angular 支持此功能。

复制堆栈轨迹

右键点击 Call Stack 窗格中的任意位置，然后选择 Copy stack trace 以将当前调用堆栈复制到剪贴板。

以下是输出示例：

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

浏览文件树

使用Page 窗格浏览文件树。

在文件树中将编写和部署的文件分组

注意：这是 Chrome 版本 104 中的 预览版功能。

使用框架（例如 React 或 Angular）开发 Web 应用时，由于构建工具（例如 webpack 或 Vite）会生成缩减文件，因此可能很难浏览源代码。

为帮助您浏览来源，Sources > Page 窗格可以将文件分为两类：

• 已编写。类似于您在 IDE 中查看的源文件。开发者工具会根据构建工具提供的源映射生成这些文件。
• 已部署。浏览器读取的实际文件。这些文件通常会缩减。

如需启用分组功能，请在文件树顶部的三点状菜单下启用 > 按作者/已部署对文件进行分组 选项。

在文件树中隐藏已列入忽略列表的源代码

注意：这是 Chrome 106 及更高版本提供的 预览版功能。

为了让您仅关注自己创建的代码，默认情况下，Sources > Page 窗格会将添加到 设置 > 忽略列表中的所有脚本或目录显示为灰色。

要完全隐藏此类脚本，请依次选择 Sources > Page > > Hide ignore-listed sources 。

忽略某个脚本或脚本模式

调试时，请忽略脚本以跳过该脚本。如果忽略，脚本会在 Call Stack 窗格中被遮盖，并且您在单步调试代码时绝不会单步进入脚本的函数。

例如，假设您正在单步调试此代码：

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A 是您信任的第三方库。如果您确信正在调试的问题与第三方库无关，则可以忽略该脚本。

忽略文件树中的脚本或目录

要忽略单个脚本或整个目录，请执行以下操作：

1. 在来源 > 网页中，右键点击某个目录或脚本文件。
2. 选择将目录/脚本添加到忽略列表。

如果您未隐藏已列入忽略名单的来源，则可以在文件树中选择此类来源，然后在 警告横幅上点击从忽略列表中移除或配置。

否则，您可以通过 设置 > 忽略列表从列表中移除隐藏和已忽略的目录和脚本。

在“编辑器”窗格中忽略脚本

如需在 Editor 窗格中忽略脚本，请执行以下操作：

1. 打开相应文件。
2. 右键点击任意位置。
3. 选择将脚本添加到忽略列表。

您可以前往 设置 > 忽略列表，从忽略列表中移除脚本。

从“Call Stack”窗格中忽略脚本

如需在 Call Stack 窗格中忽略脚本，请执行以下操作：

1. 右键点击脚本中的函数。
2. 选择将脚本添加到忽略列表。

您可以前往 设置 > 忽略列表，从忽略列表中移除脚本。

在“设置”中忽略脚本

请参阅 设置 > 忽略列表。

从任何页面运行调试代码段

如果您发现自己在控制台中反复运行相同的调试代码，不妨考虑使用代码段。 代码段是您在开发者工具中编写、存储和运行的可执行脚本。

如需了解详情，请参阅从任何页面运行代码段。

观察自定义 JavaScript 表达式的值

使用“Watch”窗格观察自定义表达式的值。您可以监视任何有效的 JavaScript 表达式。

• 点击 Add Expression 图标 以创建新的监视表达式。
• 点击 Refresh 以刷新所有现有表达式的值。单步调试代码时，值会自动刷新。
• 将鼠标悬停在表达式上，然后点击删除表达式 以将其删除。

检查和修改脚本

当您在 Page 窗格中打开脚本时，开发者工具会在 Editor 窗格中显示其内容。在编辑器窗格中，您可以浏览和修改代码。

此外，您可以在本地替换内容，或者创建一个工作区，并将您在开发者工具中所做的更改直接保存到本地源代码中。

使缩减后的文件可读

默认情况下，Sources 面板会美观输出缩小的文件。采用美观输出方式时，Editor 可能会在多行中显示一个长代码行，其中 - 表示它是行延续。

如需在缩减文件加载后查看缩减文件的大小，请点击 Editor 左下角的 { }。

折叠代码块

如需折叠代码块，请将鼠标悬停在左侧列中的行号上，然后点击 收起。

如需展开代码块，请点击它旁边的 {...}。

如需配置此行为，请参阅 Settings > Preferences > Sources。

修改脚本

在修复 bug 时，您经常需要测试对 JavaScript 代码的一些更改。您无需在外部浏览器中进行更改，然后重新加载页面。您可以在开发者工具中修改脚本。

要修改脚本，请执行以下操作：

1. 在 Sources 面板的 Editor 窗格中打开该文件。
2. 在 Editor 窗格中进行更改。

3. 按 Command+S (Mac) 或 Ctrl+S（Windows、Linux）进行保存。开发者工具将整个 JS 文件修补到 Chrome 的 JavaScript 引擎中。

   

   上方屏幕截图中的 Editor 窗格显示为蓝色轮廓。

实时修改已暂停的函数

注意：Chrome 105 及更高版本提供此功能。

暂停执行后，您可以修改当前函数并实时应用更改，但存在以下限制：

• 您只能修改 Call Stack 中最顶层的函数。
• 不得在堆栈中更靠后的位置对同一函数进行递归调用。

要点：应用更改后，调试程序会自动重启函数。因此，函数重启的限制同样适用。您无法重启 WebAssembly、异步和生成器函数。

如需实时修改函数，请执行以下操作：

1. 使用断点暂停执行。
2. 修改已暂停的函数。
3. 按 Command / Ctrl + S 以应用更改。调试程序会自动重启函数。
4. 继续执行。

请观看下面的视频，了解此工作流程。

在此示例中，addend1 和 addend2 变量最初的 string 类型不正确。因此，这些字符串不是加了数字，而是串联起来的。为了解决此问题，实时编辑期间会添加 parseInt() 函数。

搜索和替换脚本中的文本

若要搜索脚本中的文字，请执行以下操作：

1. 在 Sources 面板的 Editor 窗格中打开该文件。
2. 若要打开内置搜索栏，请按 Command+F (Mac) 或 Ctrl+F（Windows、Linux）。
3. 在栏中输入您的查询。 您也可以：
   • 点击 匹配大小写可让查询区分大小写。
   • 点击 使用正则表达式可使用正则表达式表达式进行搜索。
4. 按 Enter 键。要跳转到上一个或下一个搜索结果，请按向上或向下按钮。

如需替换找到的文字，请执行以下操作：

1. 在搜索栏中，点击 替换按钮。
2. 输入要替换为的文本，然后点击替换或全部替换。

停用 JavaScript

请参阅使用 Chrome 开发者工具停用 JavaScript。