借助 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 后，DevTools 会执行您要单步调试的函数（即 B 和 C）中的所有代码。然后，DevTools 会在 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（进入）后，DevTools 会执行这行代码，然后在 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 后，DevTools 会在
getName()，在本例中为 B，然后会在 C 时暂停。
运行特定行之前的所有代码
调试一个较长的函数时，可能会有很多代码与您遇到的问题无关 调试。
您可以单步调试所有行，但这可能会很繁琐。您可以设置一行代码，
所需代码行上的断点处添加断点，然后按 Resume Script Execution 按钮
，但有一种更快的方法。
右键点击您感兴趣的代码行，然后选择继续到此处。DevTools 运行到该时间点之前的所有代码，然后暂停在该代码行。
继续执行脚本
要在暂停后继续执行脚本，请点击继续执行脚本
。开发者工具会执行脚本，直到下一个断点（如果有）。
强制执行脚本
要忽略所有断点并强制脚本继续执行，请点击并按住恢复脚本
执行 
然后选择强制脚本执行
。
更改会话串上下文
使用 Web Worker 或 Service Worker 时，点击 Threads 窗格中列出的上下文即可切换到该上下文。蓝色箭头图标表示当前选定的上下文。
上方屏幕截图中的 Threads 窗格显示为蓝色。
例如，假设您在 main 脚本和 Service 中的断点处都暂停了 工作器脚本。您想查看服务工作线程上下文的本地和全局属性，但“Sources”面板显示的是主脚本上下文。点击“线程”窗格中的服务工件条目，即可切换到该上下文。
逐步解析以英文逗号分隔的表达式
通过浏览以英文逗号分隔的表达式，您可以调试经过缩减的代码。例如，请参考以下代码：
function foo() {}
function bar() {
foo();
foo();
return 42;
}
bar();
缩减大小后，其中包含以英文逗号分隔的 foo(),foo(),42 表达式：
function foo(){}function bar(){return foo(),foo(),42}bar();
调试程序会以相同的方式逐步处理此类表达式。
因此，步进行为是相同的：
- 缩减后的代码与原始代码之间。
- 使用源代码映射根据原始代码调试缩减后的代码。换句话说，当您看到英文分号时，即使您要调试的实际源代码经过了缩减，您也始终可以按步调试。
查看和修改本地属性、闭包属性和全局属性
在某代码行暂停时，使用 Scope 窗格可查看和修改局部、闭包和全局作用域中的属性和变量的值。
- 双击属性值可对其进行更改。
- 不可枚举的属性显示为灰色。
上方屏幕截图中的范围窗格用蓝色勾勒。
查看当前调用堆栈
在某行代码上暂停时，使用 Call Stack 窗格查看使您进入此操作的调用堆栈 。
点击某个条目即可跳转到调用该函数的代码行。蓝色箭头图标表示 DevTools 当前突出显示的函数。
上方屏幕截图中的 Call Stack 窗格用蓝色勾勒。
重启调用堆栈中的函数（帧）
若要观察函数的行为并重新运行该函数，而不必重启整个调试流程，您可以在此函数暂停时重新开始执行单个函数。换言之，您可以在调用堆栈中重启函数的帧。
如需重启帧，请执行以下操作：
- 在断点处暂停函数执行。调用堆栈窗格会记录函数调用的顺序。
在 Call Stack 窗格中，右键点击一个函数，然后从下拉菜单中选择 Restart frame。
如需了解重启帧的运作方式，请考虑以下代码：
function foo(value) {
console.log(value);
bar(value);
}
function bar(value) {
value++;
console.log(value);
debugger;
}
foo(0);
foo() 函数将 0 作为参数，记录它并调用 bar() 函数。bar() 函数会依次递增参数。
请尝试按以下方式重启这两个函数的帧：
- 将上述代码复制到新代码段，然后运行该代码。执行在
debugger代码行断点停止。 - 请注意，调试程序会在函数声明旁边显示当前值：
value = 1。
- 重新启动
bar()帧。
- 按
F9逐步执行值增量语句。
请注意，当前值增加了：value = 2。 - （可选）在范围窗格中，双击相应值以进行修改，然后设置所需的值。
请尝试重启
bar()帧并多次单步执行增量语句。其价值继续提高。
帧重启不会重置参数。换句话说，重启不会在调用函数时恢复初始状态。而是会将执行指针移至函数的开头。
因此，在重启同一函数时，当前参数值会保留在内存中。
- 现在，重启调用堆栈中的
foo()帧。
请注意，值再次为 0。
在 JavaScript 中，对实参所做的更改不会在函数之外显示（反映）。嵌套函数会接收值，而不是值在内存中的位置。1. 点击“Resume script execution”（继续执行脚本）(F8) 以完成本教程。
显示已列入忽略列表的帧
默认情况下，Call Stack 窗格仅显示与您的代码相关的帧，并且会忽略添加到 
Settings >忽略列表。
如需查看包含第三方帧的完整调用堆栈，请启用 Call Stack 部分下的 Show ignore-listed frame。
您可以在此演示页面上试用：
- 在 Sources 面板中，打开
src>appapp.component.ts文件。 - 在
increment()函数中设置断点。 - 在调用堆栈部分，选中或取消选中显示列入忽略列表的帧复选框，然后观察调用堆栈中的相关帧或完整帧列表。
查看异步帧
如果您使用的框架支持，DevTools 可以通过将异步代码的两个部分关联起来来跟踪异步操作。
在这种情况下，调用堆栈会显示包括异步调用帧在内的所有通话记录。
复制堆栈轨迹
右键点击 Call Stack 窗格中的任意位置，然后选择 Copy stack trace 将当前调用堆栈复制到剪贴板。
输出示例如下：
getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)
浏览文件树
使用“页面”窗格浏览文件树。
文件树中由群组创作和部署的文件
使用框架（例如 React 或 Angular）开发 Web 应用时，由于构建工具（例如 webpack 或 Vite）生成的文件较小，因此很难浏览源代码。
为帮助您浏览来源，您可在以下位置找到来源 >Page 窗格可以将文件分为两类：
已编写。与您在 IDE 中查看的源文件类似。DevTools 会根据构建工具提供的源代码生成这些文件。
已部署。浏览器读取的实际文件。这些文件通常会缩减大小。
如需启用分组功能，请启用 
>按已编写/已部署 
选项将文件树分组到文件树顶部的三点状菜单下。
在文件树中隐藏已列入忽略列表的来源
为帮助您只专注于自己创建的代码，可以查看来源 >Page 窗格会将添加到 
Settings > 的所有脚本或目录显示为灰色默认为忽略列表。
要完全隐藏此类脚本，请选择来源 >页面 >
隐藏已列入忽略名单的来源 
。
忽略脚本或脚本模式
忽略某个脚本，以便在调试时跳过它。被忽略后，脚本会在调用堆栈窗格中被隐藏，并且在逐行执行代码时，您永远不会进入脚本的函数。
例如，假设您正在单步调试此代码：
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
A 是您信任的第三方库。如果您确信正在调试的问题
与第三方库无关，那么忽略该脚本就很合理。
忽略文件树中的某个脚本或目录
如需忽略单个脚本或整个目录，请运行以下命令：
- 在来源 >网页中，右键点击相应目录或脚本文件。
- 选择将目录/脚本添加到忽略列表。
如果您未隐藏列入忽略列表的来源，则可以在文件树中选择此类来源，然后在 
警告横幅中点击从忽略列表中移除或配置。
否则，您可以从 
设置 >忽略列表。
在“编辑器”窗格中忽略脚本
如需从编辑器窗格中忽略脚本，请执行以下操作：
- 打开相应文件。
- 右键点击任意位置。
- 选择将脚本添加到忽略列表。
您可以从 
设置 >忽略列表。
在“调用堆栈”窗格中忽略脚本
如需从调用堆栈窗格中忽略脚本，请执行以下操作：
- 右键点击脚本中的函数。
- 选择将脚本添加到忽略列表。
您可以从 
设置 >忽略列表。
在“设置”中忽略脚本
请参阅 
设置 >忽略列表。
从任何页面运行调试代码段
如果您发现自己在控制台中反复运行相同的调试代码，不妨考虑使用代码段。 代码段是您在开发者工具中编写、存储和运行的可执行脚本。
如需了解详情，请参阅从任何页面运行代码段。
监控自定义 JavaScript 表达式的值
使用“Watch”窗格可监视自定义表达式的值。您可以监视任何有效的 JavaScript 表达式。
- 点击添加表达式图标
以创建新的监视表达式。 - 点击刷新图标
可刷新所有现有表达式的值。在单步调试代码时，值会自动刷新。 - 将鼠标悬停在表达式上，然后点击删除表达式
删除它。
检查和修改脚本
当您在网页窗格中打开脚本时，DevTools 会在编辑器窗格中显示其内容。在 Editor 窗格中，您可以浏览和修改代码。
此外，您还可以在本地替换内容，或者创建一个工作区并将您在开发者工具中所做的更改直接保存到本地源中。
使缩减后的文件可读
默认情况下，Sources 面板会美观输出缩减大小的文件。经过整齐输出后，编辑器可能会以多行显示单个长代码行，使用 - 指示它是行的延续。
如需在加载时查看缩小的文件，请点击编辑器左下角的 { }。
收起代码块
如需收起代码块，请将光标悬停在左侧列中的行号上，然后点击 
Collapse（收起）。
如需展开这段代码块，请点击它旁边的 {...}。
如需配置此行为，请依次前往 
设置 > 偏好设置 > 来源。
修改脚本
在修复错误时，您通常希望测试对 JavaScript 代码进行的一些更改。您无需在外部浏览器中进行更改，然后重新加载页面。您可在以下位置修改脚本： 开发者工具。
如需修改脚本，请执行以下操作：
- 在 Sources 面板的 Editor 窗格中打开文件。
- 在编辑器窗格中进行更改。
按 Command + S (Mac) 或 Ctrl + S（Windows、Linux）即可 保存。开发者工具会将整个 JS 文件补丁到 Chrome 的 JavaScript 引擎中。
上图中的编辑器窗格用蓝色勾勒。
实时修改暂停的函数
在执行暂停期间，您可以修改当前函数并实时应用更改，但存在以下限制：
- 您只能修改调用堆栈中最顶层的函数。
- 堆栈更深层级不得对同一函数进行递归调用。
如需实时修改函数，请执行以下操作：
观看下面的视频，了解该工作流程。
在此示例中，addend1 和 addend2 变量最初的 string 类型不正确。因此，不是将数字相加，而是串联字符串。为了解决此问题，我们在实时编辑期间添加了 parseInt() 函数。
搜索和替换脚本中的文本
如需搜索脚本中的文本，请执行以下操作：
- 在 Sources 面板的 Editor 窗格中打开该文件。
- 如需打开内置搜索栏，请按 Command+F (Mac) 或 Ctrl+F (Windows、Linux)。
- 在栏中输入您的查询内容。
您也可以：
- 点击
Match Case 可使查询区分大小写。 - 点击
使用正则表达式，即可使用正则表达式进行搜索。
- 点击
- 按 Enter 键。若要跳转到上一个或下一个搜索结果，请按向上或向下按钮。
如需替换找到的文字，请执行以下操作：
- 在搜索栏上，点击
Replace 按钮。
- 输入要替换的文字，然后点击替换或全部替换。