开发者工具中的新功能 (Chrome 120)

逐步淘汰第三方 Cookie

您的网站可能使用了第三方 Cookie，请及时采取行动，因为我们即将弃用此类 Cookie。如需了解如何处理受影响的 Cookie，请参阅为弃用第三方 Cookie 做好准备。

包含第三方 Cookie 问题复选框已默认为所有 Chrome 用户启用，因此问题标签页现在会提醒您哪些 Cookie 将受到即将弃用和逐步停用第三方 Cookie 的影响。您可以随时取消选中此复选框，以停止看到这些问题。

Chromium 问题：1466310。

使用 Privacy Sandbox Analysis Tool 分析网站的 Cookie

适用于 DevTools 的 Privacy Sandbox Analysis Tool 扩展程序正在积极开发中，最新的预发布版本为 0.3.2。借助该工具，您可以了解自己的网站如何使用 Cookie，并获得有关可保护隐私的新 Chrome API 的指导。

如需分析 Cookie，请执行以下操作：

1. 在 Chrome 中安装扩展程序。
2. 在单个标签页中打开您的网站，以获得最佳分析结果。
3. 打开开发者工具，然后前往 Privacy Sandbox 面板。此面板可能隐藏在顶部的 下拉按钮后面。
4. 打开 Cookies 部分，然后点击 Analyze this tab（分析此标签页）。如果该工具未找到任何 Cookie，请尝试重新加载页面。

如需详细了解如何使用 Privacy Sandbox Analysis Tool (PSAT)，请参阅以下内容：

• PSAT 使用指南。
• 如需预测废弃生效后可能会发生的情况，请设置评估环境。
• 如需确定受影响的方面，请参阅常规分析操作。
• 如需了解如何分析常见场景（包括分析、电子商务、SSO 服务、嵌入式内容等），请查看分析场景中的演示示例。

此外，请参阅有关报告问题的指南。

增强型忽略列表

node_modules 的默认排除模式

此版本在 设置 > 忽略列表中将默认正则表达式作为自定义排除规则启用。为了帮助您专注于代码，调试程序现在默认会跳过 /node_modules/ 和 /bower_components/ 中的脚本。您可以随时在设置中停用此规则。

Chromium 问题：1496301。

现在，如果异常被捕获或通过非忽略的代码，则会停止执行

当您在调试代码时选中 在捕获到异常时暂停，调试程序现在会在捕获到以下同步和异步异常时停止执行：

• 在调用堆栈中的非忽略帧中捕获的异常。
• 捕获了通过调用堆栈中非忽略帧的异常。例如，请参阅屏幕截图。

如需测试此行为，请打开此演示页面：

1. 依次打开 DevTools > Sources，将 hidden 文件夹添加到忽略列表，然后选中 Pause on caught exceptions。
2. 在该页面上，点击“已捕获”场景列表下方的不同按钮，查看在上述情况下执行会被暂停。

如需在异步调用中捕获的异常和/或未捕获的异常（在选中的情况下）发生时暂停执行，调试程序会在所有 promise 中查找拒绝处理程序。从此版本开始，调试器不再预测 Promise.finally() 会捕获异常，这与 try...finally 块不会捕获任何异常类似。

Chromium 问题：1489312、1291064。

在源映射中，x_google_ignoreList 已重命名为 ignoreList

源映射规范已采用 ignoreList 字段（而非 x_google_ignoreList），并且 DevTools 现在支持新名称，并会回退到旧名称。框架和捆绑程序现在可以使用新字段名称。

借助源代码映射，您可以调试自己编写的代码，而不是网站提供的缩减大小的代码。

如需详细了解源代码映射，请参阅：

• 什么是源代码映射
• 调试原始代码，而不是使用源映射进行部署

远程调试期间新增了输入模式切换开关

现在，您可以在远程调试 Chrome 标签页时在触摸输入和鼠标输入之间切换。例如，当您使用 --remote-debugging-port=<port> 运行 Chrome 实例并通过 chrome://inspect/#devices 连接到此网络目标时。

观看视频，了解输入法切换的实际操作。

Chromium 问题：1410433。

“元素”面板现在会显示 #document 节点的网址

为了让您更轻松地调试 iframe，元素面板现在会在 #document 节点旁边显示 documentURL。

Chromium 问题：1376976。

“应用”面板中的有效内容安全政策

现在，您可以查看被检查框架的内容安全政策 (CSP) 详细信息。如需查看详细信息，请依次前往应用 > 框架，选择一个框架，然后向下滚动到内容安全政策 (CSP) 部分。

Chromium 问题：1424714。

改进了动画调试

现在，您可以在动画标签页中执行以下操作：

• 点击时间轴标题中的任意位置以设置播放头。如果动画已在播放，则继续播放；否则停止播放。以前，您必须拖动它。
• 调整“名称”列的大小，以查看完整的动画名称。

Chromium 问题：1492460、1489721。

“您信任此代码吗？”对话框（在“Sources”中）和控制台中的自 XSS 警告

在粘贴代码时显示有关自定义 XSS 的警告 实验默认处于启用状态。自定义 XSS（自定义跨站脚本攻击）是一种攻击，会诱骗您将恶意代码粘贴到 DevTools 中，让攻击者控制您的网络账号和个人信息。

如果您是开发者工具的新用户，并且尝试粘贴代码，Sources 面板现在会显示 Do you trust this code? 对话框，并且 Console 现在会显示类似的警告。请仅粘贴您理解且自行检查过的代码。如需粘贴，请在系统提示时输入 allow pasting。允许粘贴一次后，系统将永远不会再显示此警告。

Chromium 问题：345205。

网络工作器和工作单元中的事件监听器断点

现在，当您在来源 > 事件监听器断点中设置事件断点后，除了在网站上遇到此事件时暂停之外，调试程序还会在任何类型的 Web Worker 或 Worklet（包括 Shared Storage Worklet）中发生相应事件时暂停。

Chromium 问题：1445175。

<audio> 和 <video> 的新媒体徽章

现在，您可以在 Elements 面板中为 <audio> 和 <video> 元素启用新的媒体标记。点击该徽章后，您会进入媒体面板，以便调试这些元素。

此功能正在开发中，我们会进一步改进。开发者工具团队谨在此感谢 Junseo (Jeremy) Yoo 为我们带来这项改进。

Chromium 问题：1448214。

“预加载”已重命名为“推测加载”

为避免过度使用之前的术语并更好地反映行为，我们已将应用 > 预加载重命名为推测性加载。推测性加载可根据您为网站定义的推测规则，预渲染和预提取大多数导航到的网页，从而实现近乎即时的网页加载。

Chromium 问题：1478888。

Lighthouse 11.2.0

Lighthouse 面板现在运行的是 Lighthouse 11.2.0。请参阅完整的变更列表。

本次更新对效果类别进行了全面改进。现在，系统会根据效果指标的预计影响，为效果分析得分并确定优先级。此外，性能得分指示器还包含有关每个指标如何影响得分的更详细信息。

如需了解如何在 DevTools 中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

改进了无障碍功能

此版本在无障碍功能方面进行了以下改进：

• 现在，屏幕阅读器会读出 Sources（来源）> Breakpoints（断点）下的复选框的状态（选中或未选中）。
• 您现在可以使用键盘访问隐藏与此类似的问题下拉菜单。

Chromium 问题：1488645、1484918。

其他亮点

以下是此版本中的一些值得注意的修复和改进：

• 性能：修复了录制内容中有时缺少 LCP 指示器的问题 (1487136)。
• 推测性加载：修复了网络面板下拉菜单中目标的完整网址 (1471020)。
• 覆盖率：
  • 修复了对经过美化输出的代码的行级覆盖率 (1464974)。
  • 覆盖率信息现已在页面重新加载时更新 (1494457)。
• 控制台：
  • 修复了消息中的部分文本选择问题 (1487449)。
  • 修复了自动补全下拉菜单的闪烁问题 (1487453)。
  • 支持在堆栈轨迹中的堆栈路径和网址中使用圆括号 (1473926)。
• 来源：支持 TypeScript using 关键字的语法突出显示 (1490515)。
• 快速打开菜单现在会显示私有方法 (1492957)。
• 应用 > 后台服务：顶部操作栏现在会在调整大小时换行显示文本 (1487276)。
• 元素 > 样式：
  • 修复了嵌套元素的继承 CSS 变量的解析问题 (1492162)。
  • 现在，停用 CSS 属性时，系统会移除其注释，以修复语法中断问题 (1101224)。
• 网络：优先级列现在会显示一个包含初始优先级信息的提示（勾选大请求行时也会显示相同的信息）(1495735)。
• 废弃项：
  • 颜色格式设置已在之前的版本中停用，现在已移除。
  • 由于在简化替换项后，来源中的“删除所有替换项”选项的使用率较低，因此该选项现已移除 (1473681)。

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

• 请访问 crbug.com 向我们提交反馈和功能请求。
• 在 DevTools 中，依次选择 more_vert More options > Help > Report a DevTools issue 以报告 DevTools 问题。
• 向 @ChromeDevTools 发送推文。
• 在 “开发者工具的新变化”YouTube 视频或 “开发者工具提示”YouTube 视频中留言。

开发者工具的新变化

开发者工具新变化系列中涵盖的所有内容的列表。