Chrome DevTools

java_hzh

墨衍会员 · AI 创作全网分发码龄11年

关注

翻译最新推荐文章于 2026-09-20 09:22:00 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

Chrome Devtools调试技巧 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】。

Selecting '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);

How the page looks after running the Snippet.

打开片段窗格

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】命令。

收录于