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

Google 用户调研。

第三方 Cookie 逐步淘汰

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

所有 Chrome 用户都已默认启用 包含第三方 Cookie 问题 复选框，因此问题标签页现在会就即将弃用和逐步停用第三方 Cookie 一事向您发出警告，告知您哪些 Cookie 会受到影响。您可以随时清除相应复选框，以停止查看这些问题。

Chromium 问题：1466310。

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

适用于开发者工具的 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，并且开发者工具现在支持新名称，同时为旧名称提供回退。框架和打包程序现在可以使用新的字段名称。

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

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

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

远程调试期间的新输入模式切换

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

观看视频，了解输入模式切换的实际效果。

Chromium 问题：1410433。

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

为了方便您调试 iframe，元素面板现在会在 #document 节点旁边显示 documentURL。

Chromium 问题：1376976。

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

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

Chromium 问题：1424714。

改进了动画调试

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

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

Chromium 问题：1492460、1489721。

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

粘贴代码时显示有关 Self-XSS 的警告 实验已默认启用。自 XSS（自跨站脚本攻击）是一种攻击，它会诱骗您将恶意代码粘贴到开发者工具中，让攻击者能够控制您的 Web 账号和个人信息。

如果您是开发者工具的新用户，并且尝试粘贴代码，来源面板现在会显示您信任此代码吗？对话框，控制台现在也会显示类似的警告。仅粘贴您理解并自行检查过的代码。如需粘贴，请在出现提示时输入 allow pasting。允许粘贴一次后，系统将不再显示警告。

Chromium 问题：345205。

Web Worker 和 Worklet 中的事件监听器断点

在 Sources > Event Listener Breakpoints 中设置事件断点后，除了在网站上暂停此事件之外，调试器现在还会在任何类型的 Web Worker 或 Worklet（包括 Shared Storage Worklet）中发生相应事件时暂停。

Chromium 问题：1445175。

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

您现在可以在元素面板中为 <audio> 和 <video> 元素启用新的媒体徽章。点击徽章后，系统会将您转到媒体面板，以便您调试这些元素。

此功能正在开发中，并将进一步改进。开发者工具团队要感谢 Junseo（Jeremy）Yoo 实现了这项改进。

Chromium 问题：1448214。

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

为了避免过度使用之前的术语并更好地反映该行为，我们已将应用 > 预加载重命名为推测性加载。借助推测性加载，您可以根据自行定义的推测规则，让网站预渲染和预提取用户最常访问的网页，从而实现近乎即时的网页加载。

Chromium 问题：1478888。

Lighthouse 11.2.0

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

本次更新对“性能”类别进行了全面改进。效果分析现在会根据其对效果指标的估计影响进行评分和优先排序。此外，性能得分指示器还包含有关每项指标如何影响得分的更详细信息。

如需了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍功能改进

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

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

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 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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