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

Sofia Emelianova
Sofia Emelianova
GitHub

逐步弃用第三方 Cookie

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

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

在“问题”标签页中显示关于即将弃用第三方 Cookie 的警告。

Chromium 问题：1466310。

使用 Privacy Sandbox 分析工具来分析您网站的 Cookie

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

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

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

Privacy Sandbox Analysis Tool。

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

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

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

增强型忽略列表

node_modules 的默认排除模式

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

添加正则表达式前后。

Chromium 问题：1496301。

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

在调试代码时，如果选中 复选框。 Pause on caught exceptions，调试程序现在会在以下已捕获的异常（同步和异步异常）上停止执行：

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

在通过非忽略代码的已捕获异常处暂停。

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

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

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

Chromium 问题：1489312、1291064。

在源代码映射中将 x_google_ignoreList 重命名为 ignoreList

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

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

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

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

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

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

Chromium 问题：1410433。

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

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

对比图显示了 #document 节点旁边的 document网址。

Chromium 问题：1376976。

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

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

“应用”标签页中的“内容安全政策”部分。

Chromium 问题：1424714。

改进了动画调试

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

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

Chromium 问题：1492460、1489721。

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

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

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

将代码粘贴到来源时，系统会显示“您信任此代码吗？”对话框。

Chromium 问题：345205。

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

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

当 Service Worker 调用 set timeout 函数时，调试程序会暂停。

Chromium 问题：1445175。

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

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

启用了适用于音频和视频代码的新媒体标记。

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

Chromium 问题：1448214。

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

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

将预加载重命名为推测加载之前和之后。

Chromium 问题：1478888。

Lighthouse 11.2.0

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

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

性能改进前后。

如需了解在开发者工具中使用 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 新变化系列中涵盖的所有内容的列表。