Chrome DevTools

JavaScript

调试 JavaScript 

第 1 步：重现错误 

    找到一系列能够持续重现错误的操作始终是调试的第一步。在新选项卡中打开【演示】。

第 2 步：熟悉 Sources 面板 UI 

    DevTools 为不同的任务提供了很多不同的工具，例如更改 CSS、分析页面加载性能和监控网络请求。 Sources 面板是您调试 JavaScript 的地方。 

    1，按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux）快捷方式打开控制台面板。

    2，单击【Sources】选项卡。 Sources 面板 UI 有 3 个部分：“文件导航器”窗格。 此处列出了页面请求的每个文件。"代码编辑器"窗格。 在“文件导航器”窗格中选择文件后，该文件的内容将显示在此处。”JavaScript 调试“窗格。 用于检查页面 JavaScript 的各种工具。 如果您的 DevTools 窗口很宽，则此窗格将显示在代码编辑器窗格的右侧。

第 3 步：使用断点暂停代码 

    简而言之，断点可以帮助您比 console.log() 方法更快地找到和修复错误。 

    事件侦听器断点。在 “JavaScript 调试”窗格中，单击事件侦听器断点以展开该部分。 DevTools 显示可扩展事件类别的列表，例如动画和剪贴板。在鼠标事件类别旁边，单击展开。 DevTools 会显示鼠标事件列表，例如 click 和 mousedown。 每个事件旁边都有一个复选框。选中单击复选框。 DevTools 现在设置为在任何单击事件侦听器执行时自动暂停。

第 4 步：单步执行代码 

    错误的一个常见原因是脚本以错误的顺序执行。 单步执行代码使您可以一次一行地遍历代码的方式执行，并准确找出它以与预期不同的顺序执行的位置。 

第 5 步：设置代码行断点 

    代码行断点是最常见的断点类型。 当您有要暂停的特定代码行时，请使用代码行断点：在代码的左侧，您可以看到该特定代码行的行号，即 32。单击 32。DevTools 在 32 的顶部放置一个蓝色图标。这意味着有一个代码行断点。 DevTools 现在总是在执行这行代码之前暂停。 

第 6 步：检查变量值 

    DevTools 提供了许多用于检查变量值的工具。

方法 1：【Scope】窗格。

方法二：观察表达式。 

    Watch Expressions 选项卡让您可以随时间监控变量的值。 顾名思义，监视表达式不仅限于变量。 您可以在 Watch Expression 中存储任何有效的 JavaScript 表达式。 现在就试试： 

方法三：控制台。 

    除了查看 console.log() 消息之外，您还可以使用控制台来评估任意 JavaScript 语句。 在调试方面，您可以使用控制台来测试潜在的错误修复。 现在就试试： 

如果您没有打开控制台抽屉，请按 Escape 将其打开。 它会在您的 DevTools 窗口底部打开。 

第 7 步：应用修复 

    您已找到该错误的修复程序。 剩下的就是通过编辑代码并重新运行演示来尝试您的修复。 您无需离开 DevTools 即可应用此修复程序。 您可以直接在 DevTools UI 中编辑 JavaScript 代码。 现在就试试： 1，单击恢复脚本执行。2，修改错误代码。3，按 Command+S (Mac) 或 Control+S（Windows、Linux）保存更改。4，单击停用断点。设置后，DevTools 会忽略您设置的任何断点。5，尝试使用不同的值进行演示。 演示现在计算正确。 

下一步 

本教程仅向您展示了两种设置断点的方法。 DevTools 提供了许多其他方式，包括：1，条件断点仅在您提供的条件为真时触发。2，捕获或未捕获异常的断点。3，当请求的 URL 与您提供的子字符串匹配时触发的 XHR 断点。 

用断点暂停你的代码 

使用断点暂停您的 JavaScript 代码。 本指南解释了 DevTools 中可用的每种类型的断点，以及何时使用以及如何设置每种类型。 

何时使用每种断点类型的概述 

最著名的断点类型是代码行。 但是设置代码行断点可能效率低下，特别是如果您不知道确切的位置，或者您正在使用大型代码库。 您可以通过了解如何以及何时使用其他类型的断点来节省调试时间。 

断点类型	当您想暂停时使用它...
代码行	在一个确切的代码区域。
有条件的代码行	在确切的代码区域上，但仅当某些其他条件为真时。
DOM	在更改或删除特定 DOM 节点或其子节点的代码上。
XHR	当 XHR URL 包含字符串模式时。
事件监听器	在触发事件（例如单击）之后运行的代码上。
异常	在抛出捕获或未捕获异常的代码行上。
函数	每当调用特定函数时。

代码行断点

当您知道需要调查的确切代码区域时，使用代码行断点。 DevTools 总是在执行这行代码之前暂停。 

单击【Sources】选项卡。打开包含要中断的代码行的文件。转到代码行。代码行的左侧是行号列。 点击它。 行号列顶部会出现一个蓝色图标。 

代码中的代码行断点，从您的代码中调用调试器以在该行上暂停。 这相当于代码行断点，只是断点设置在您的代码中，而不是在 DevTools UI 中。

console.log('a');
console.log('b');
debugger;
console.log('c');

有条件的代码行断点，当您知道需要调查的确切代码区域，但只想在其他条件为真时暂停时，使用条件代码行断点。

单击【Sources】选项卡。打开包含要中断的代码行的文件。转到代码行。代码行的左侧是行号列。 右键单击它。选择添加条件断点。 代码行下方会显示一个对话框。在对话框中输入您的条件。按 Enter 键激活断点。 行号列顶部会出现一个橙色图标。 

管理代码行断点，使用 Breakpoints 窗格从单个位置禁用或删除代码行断点。 

选中条目旁边的复选框以禁用该断点。右键单击一个条目以删除该断点。右键单击 Breakpoints 窗格中的任意位置以停用所有断点、禁用所有断点或删除所有断点。 禁用所有断点相当于取消选中每个断点。 停用所有断点指示 DevTools 忽略所有代码行断点，但同时保持其启用状态，以便在您重新激活它们时它们处于与之前相同的状态。 

DOM 更改断点

当您想要暂停更改 DOM 节点或其子节点的代码时，请使用 DOM 更改断点。 

单击【Elements】选项卡。转到要设置断点的元素。右键单击该元素。将鼠标悬停在 Break on 上，然后选择子树修改、属性修改或节点移除。 

DOM 更改断点的类型，子树修改。 当移除或添加当前选定节点的子节点或更改子节点的内容时触发。 不会在子节点属性更改或对当前选定节点的任何更改时触发。属性修改：在当前选择的节点上添加或删除属性时触发，或者当属性值更改时触发。节点移除：当当前选中的节点被移除时触发。 

XHR/Fetch断点 

当您想在 XHR 的请求 URL 包含指定字符串时中断时，请使用 XHR 断点。 DevTools 在 XHR 调用 send() 的代码行上暂停。 

这很有用的一个例子是，当您看到您的页面请求的 URL 不正确，并且您想快速找到导致错误请求的 AJAX 或 Fetch 源代码时。 

单击【Sources】选项卡。展开 XHR 断点窗格。单击添加断点。输入要中断的字符串。 当此字符串出现在 XHR 请求 URL 的任何位置时，DevTools 会暂停。按 Enter 确认。 

事件监听断点 

如果您想在触发事件后运行的事件侦听器代码上暂停，请使用事件侦听器断点。 您可以选择特定事件（例如单击）或事件类别（例如所有鼠标事件）。 

单击【Sources】选项卡。展开事件侦听器断点窗格。 DevTools 显示事件类别列表，例如动画。
选中其中一个类别以在触发该类别中的任何事件时暂停，或展开类别并检查特定事件。 

异常断点 

当您想在抛出捕获或未捕获异常的代码行上暂停时，使用异常断点。 

单击【Sources】选项卡。单击异常时暂停。启用时变为蓝色。
（可选）如果除了未捕获的异常之外，还想暂停捕获的异常，请选中 【Pause On Caught Exceptions】 复选框。 

函数断点 

当您想在调用特定函数时暂停时，调用 【debug(functionName)】，其中 functionName 是您要调试的函数。 您可以将 【debug()】 插入您的代码（如 console.log() 语句）或从 DevTools 控制台调用它。 debug() 相当于在函数的第一行设置一个代码行断点。

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

确保目标函数在范围内，如果要调试的函数不在范围内，DevTools 会抛出 ReferenceError。

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

如果您从 DevTools 控制台调用 debug()，确保目标函数在范围内可能会很棘手。 这是一种策略：在函数在作用域内的某处设置一个代码行断点。触发断点。当代码仍然在代码行断点处暂停时，在 DevTools 控制台中调用 debug()。

JavaScript 调试参考 

单步执行代码 

一旦您的代码暂停，请一次一行地单步执行，并在此过程中调查控制流和属性值。 

跳过代码行， 当在包含与您正在调试的问题无关的函数的代码行上暂停时，单击 【Step over S】 以执行该函数而不进入它。

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

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 运行到该点的所有代码，然后在该行上暂停。

恢复脚本执行，要在暂停后继续执行脚本，请单击恢复脚本执行【Resume Script Execution】。 DevTools 执行脚本直到下一个断点（如果有）。 

强制执行脚本，要忽略所有断点并强制您的脚本继续执行，请单击并按住 【Resume Script Execution】，然后选择 【Force script execution】。  

更改线程上下文，使用 Web Worker 或 Service Worker 时，单击“线程”窗格中列出的上下文以切换到该上下文。 蓝色箭头图标表示当前选择了哪个上下文。

例如，假设您在主脚本和 Service Worker 脚本中的断点处暂停。 您想查看 Service Worker 上下文的本地和全局属性，但 Sources 面板显示的是主脚本上下文。 通过单击 Threads 窗格中的 service worker 条目，您将能够切换到该上下文。 

查看和编辑本地、闭包和全局属性

在一行代码上暂停时，使用 Scope 窗格查看和编辑本地、闭包和全局范围内的属性和变量的值。双击属性值以更改它。不可枚举的属性显示为灰色。 

查看当前调用堆栈 

在一行代码上暂停时，使用“调用堆栈”窗格查看使您走到这一步的调用堆栈。如果您正在使用异步代码，请选中 Async 复选框以启用异步调用堆栈。单击条目可跳转到调用该函数的代码行。 蓝色箭头图标表示 DevTools 当前突出显示的功能。 

复制堆栈跟踪，右键单击“调用堆栈”窗格中的任意位置，然后选择“复制堆栈跟踪”以将当前调用堆栈复制到剪贴板。 

下面是一个输出示例： 

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

忽略脚本或脚本模式

在调试时忽略脚本以跳过它。 忽略时，脚本在“调用堆栈”窗格中会变得模糊，当您单步执行代码时，您永远不会进入脚本的函数。 

例如，假设您正在逐步执行以下代码： 

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

A 是您信任的第三方库。 如果您确信您正在调试的问题与第三方库无关，那么忽略该脚本是有意义的。

忽略编辑器窗格中的脚本，打开文件。右键单击任意位置。选择添加脚本以忽略列表。 

忽略“调用堆栈”窗格中的脚本，右键单击脚本中的函数。选择添加脚本以忽略列表。

忽略设置中的脚本，打开设置。转到忽略列表选项卡。单击添加模式。输入要忽略的脚本名称或脚本名称的正则表达式模式。单击添加。 

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

如果您发现自己在控制台中一遍又一遍地运行相同的调试代码，请考虑使用代码段。 代码段是您在 DevTools 中创作、存储和运行的可执行脚本。 

观察自定义 JavaScript 表达式的值 

使用 Watch 窗格来观察自定义表达式的值。 您可以查看任何有效的 JavaScript 表达式。 

单击【添加表达式】以创建新的监视表达式。单击 【Refresh】 以刷新所有现有表达式的值。 单步执行代码时，值会自动刷新。将鼠标悬停在表达式上，然后单击【删除表达式】以将其删除。 

使缩小的文件可读 

单击 【Format】 使缩小的文件可读。 

编辑脚本

在修复错误时，您通常希望测试对 JavaScript 代码的一些更改。 您无需在外部浏览器中进行更改，然后重新加载页面。 您可以在 DevTools 中编辑您的脚本。 

在【Sources】面板的【Editor】窗格中打开文件。在编辑器窗格中进行更改。按 Command+S (Mac) 或 Ctrl+S（Windows、Linux）保存。 DevTools 将整个 JS 文件修补到 Chrome 的 JavaScript 引擎中。

运行 JavaScript 片段

如果您发现自己在控制台中重复运行相同的代码，请考虑将代码另存为代码段。 片段是您在【Sources】面板中创作的脚本。 它们可以访问页面的 JavaScript 上下文，并且您可以在任何页面上运行它们。 片段是书签的替代品。

console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

打开片段窗格

    1，用鼠标打开片段窗格。单击【Sources】选项卡以打开【Sources】面板。 【Page】窗格通常默认打开。 单击【Snippets】选项卡以打开【Snippets】窗格。 您可能需要单击【更多选项卡】才能访问代码段选项。

     2，使用命令菜单打开片段窗格。将光标放在 DevTools 内的某个位置。按 Control+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单。开始键入 【Snippets】，选择 【Show Snippets】，然后按 【Enter】 运行命令。

创建片段 

    1，通过【Sources 】面板创建代码段。 打开片段窗格。单击新建代码段。输入代码段的名称，然后按 Enter 保存。

    2，通过命令菜单创建片段。将光标放在 DevTools 内的某个位置。按 Control+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单。开始输入 【Snippet】，选择 【Create new snippet】，然后按 【Enter】 运行命令。

编辑片段

    打开片段窗格。在 【Snippets】 窗格中，单击要编辑的 Snippet 的名称以在代码编辑器中打开它。使用代码编辑器将 JavaScript 添加到您的代码段。如果您的代码段名称旁边有一个星号，则表示您有未保存的代码。 按 Control+S 或 Command+S (Mac) 进行保存。

运行代码段 

    1，从【Sources 】面板运行代码段。 打开片段窗格。单击要运行的代码段的名称。 代码段在代码编辑器中打开。单击运行代码段运行代码段，或按 Control+Enter 或 Command+Enter (Mac)。

    2，使用命令菜单运行代码段。将光标放在 DevTools 内的某个位置。按 Control+O 或 Command+O (Mac) 打开命令菜单。键入【!】字符后跟要运行的代码段的名称。按 Enter 运行代码段。

管理代码片段 

    1，重命名片段。打开片段窗格。右键单击代码段名称并选择重命名。
    2，删除片段。打开片段窗格。右键单击代码段名称并选择删除。

Sources 面板概览 

查看文件 

使用【Page】窗格查看页面已加载的所有资源。

页面窗格的组织方式：顶层， top 代表主文档框架。第二级，代表一个来源。第三级、第四级等代表从该源加载的目录和资源。单击【Page】窗格中的文件以在【Editor 】窗格中查看其内容。 您可以查看任何类型的文件。 对于图像，您会看到图像的预览。

编辑 CSS 和 JavaScript 

使用编辑器窗格来编辑 CSS 和 JavaScript。 DevTools 更新页面以运行您的新代码。 例如，如果您编辑元素的背景颜色，您将看到更改立即生效。

CSS 更改立即生效，无需保存。 要使 JavaScript 更改生效，请按 Command+S (Mac) 或 Control+S（Windows、Linux）。 DevTools 不会重新运行脚本，因此唯一生效的 JavaScript 更改是您在函数内部所做的更改。 例如，在图 4 中，请注意 【console.log('A') 】不运行，而 【console.log('B') 】运行。 如果 DevTools 在进行更改后重新运行整个脚本，那么文本 A 将被记录到控制台。 

创建、保存和运行代码段

片段是可以在任何页面上运行的脚本。 想象一下，您在 Console 中重复输入以下代码，以便将 jQuery 库插入到页面中，以便您可以从 Console 运行 jQuery 命令： 

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

相反，您可以将此代码保存在 Snippet 中，并在需要时通过单击几下按钮来运行它。 DevTools 将代码片段保存到您的文件系统。

调试后台服务 

Chrome DevTools 的后台服务部分是 JavaScript API 的工具集合，即使用户没有打开您的网站，您的网站也可以发送和接收更新。 后台服务在功能上类似于后台进程。 Chrome DevTools 将以下每个 API 视为后台服务： 【后台获取 Background Fetch】，【后台同步 Background Sync】，【通知 Notifications】，【推送消息 Push Messages】。即使 DevTools 未打开，Chrome DevTools 也可以记录 3 天的后台服务事件。 这可以帮助您确保事件按预期发送和接收。 您还可以检查每个事件的详细信息。

后台获取

【Background Fetch API】 使 【Service Worker】 能够可靠地下载大型资源，如电影或播客，作为后台服务。 要记录 3 天的后台提取事件，即使 DevTools 未打开： 打开开发者工具。打开【Application】面板。打开【Background Fetch】窗格。单击【Record】。 触发一些后台提取活动后，DevTools 将事件记录到表中。单击一个事件可在表格下方的空间中查看其详细信息。

后台同步 

【Background Sync API】 使离线 【Service Worker】能够在重新建立可靠的互联网连接后将数据发送到服务器。 要记录 3 天的后台同步事件，即使 DevTools 未打开： 打开开发者工具。打开【Application】面板。打开【Background Sync】窗格。单击【Record】。 触发一些后台同步活动后，DevTools 将事件记录到表中。单击一个事件可在表格下方的空间中查看其详细信息。

通知  

【Service Worker】从服务器收到推送消息后，【Service Worker】 使用 【Notifications API】 向用户显示数据。 要记录 3 天的通知，即使 DevTools 未打开： 打开开发者工具。打开【Application】面板。打开【Notifications】窗格。单击【Record】。 触发一些通知活动后，DevTools 将事件记录到表中。单击一个事件可在表格下方的空间中查看其详细信息。

推送消息 

要向用户显示推送通知，【Service Worker】必须首先使用推送消息 API 从服务器接收数据。 当 【Service Worker】 准备好显示通知时，它会使用 【Notifications API】。 要记录推送消息 3 天，即使 DevTools 未打开： 打开开发者工具。打开【Application】面板。打开【Push Messaging】窗格。单击【Record】。 触发一些推送消息活动后，DevTools 将事件记录到表中。单击一个事件可在表格下方的空间中查看其详细信息。

忽略 Chrome 扩展脚本 

当使用 Chrome DevTools 的 Sources 面板单步执行代码时，有时您会在不认识的代码上暂停。 您可能暂停了已安装的其中一个 Chrome 扩展程序的代码。 永远不要暂停扩展代码：按 F1 打开设置。 或单击【Settings】。打开忽略列表选项卡。启用【Add content scripts to ignore list】复选框。

禁用 JavaScript 

要查看禁用 JavaScript 时网页的外观和行为：打开 Chrome 开发者工具。按 Control+Shift+P 或 Command+Shift+P (Mac) 打开命令菜单。开始键入【javascript】，选择【Disable JavaScript】，然后按 Enter 运行命令。 JavaScript 现在已禁用。Sources 旁边的黄色警告图标提醒您 JavaScript 已禁用。只要您打开 DevTools，JavaScript 在此选项卡中将保持禁用状态。您可能希望重新加载页面以查看页面在加载时是否以及如何依赖 JavaScript。要重新启用 JavaScript：再次打开命令菜单并运行【Enable JavaScript】命令。