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

Sofia Emelianova
Sofia Emelianova
GitHub

逐步弃用第三方 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. 打开开发者工具，然后前往 Privacy Sandbox 面板。此面板可能隐藏在顶部的 更多标签页。 下拉按钮之后。
  4. 打开 Cookie 部分，然后点击分析此标签页。如果该工具未找到任何 Cookie，请尝试重新加载页面。

Privacy Sandbox 分析工具。

如需详细了解如何使用 Privacy Sandbox 分析工具 (PSAT)，请参阅以下内容：

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

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

增强的忽略列表

“node_modules”的默认排除模式

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

添加正则表达式的前后。

Chromium 问题：1496301。

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

现在，当您调试代码时勾选了 复选框。 Pause on caughtexception 时，Debugger 会在已捕获的以下异常（同步和异步）上停止执行：

  • 调用堆栈的非忽略帧中捕获的异常。
  • 捕获了遍历调用堆栈中的非忽略帧的异常。例如，请查看屏幕截图。

在通过未忽略的代码传递的已捕获异常上暂停。

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

  1. 打开开发者工具 >Sources（来源），将 hidden 文件夹添加到忽略列表，然后选中 复选框。 Pause on caught exceptions（暂停捕获的异常）。
  2. 在该页的“捕获”场景列表，点击不同的按钮，您会看到在上述情况下暂停的执行。

如需在异步调用中已捕获和/或未捕获异常（如果已勾选）时暂停执行，Debugger 会在 promise 中查找拒绝处理程序。从此版本开始，Debugger 不再预测 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。

前面和后面的内容在 #document 节点旁边显示 document网址。

Chromium 问题：1376976。

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

现在，您可以查看所检查帧的内容安全政策 (CSP) 详细信息。如需查看详情，请导航至 Application（应用）>框架，选择一个框架并向下滚动到内容安全政策 (CSP) 部分。

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

Chromium 问题：1424714。

改进了动画调试

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

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

Chromium 问题：1492460、1489721。

“您信任此代码吗？”“Sources”中的对话框和控制台中的 Self-XSS 警告

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

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

“您信任此代码吗？”对话框。

Chromium 问题：345205。

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

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

在 Service Worker 调用设置的超时函数时暂停调试程序。

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。

改进了无障碍功能

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

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

Chromium 问题：1488645、1484918。

其他亮点

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

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

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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