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

Sofia Emelianova
Sofia Emelianova
GitHub

逐步弃用第三方 Cookie

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

默认情况下，系统已为所有 Chrome 用户启用 复选框。 包括第三方 Cookie 问题复选框。因此，问题标签页现在会针对即将因即将弃用和逐步淘汰第三方 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 Analysis Tool (PSAT)，请参阅以下内容：

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

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

增强的忽略列表

“node_modules”的默认排除格式

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

添加正则表达式的前后对比效果。

Chromium 问题：1496301。

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

现在，如果您在选中 复选框。 捕获异常时暂停的情况下调试代码，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) 详情。如需查看详情，请依次转到应用 > 帧，选择一个帧，然后向下滚动到内容安全政策 (CSP) 部分。

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

Chromium 问题：1424714。

改进了动画调试

在动画标签页中，您现在可以：

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

Chromium 问题：1492460、1489721。

来源中的“Do you trust this code?”（您是否信任此代码？）对话框，以及控制台中的 self-XSS 警告

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

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

将代码粘贴到 Sources 时，“Do you trust this code?”（您是否信任此代码？）对话框。

Chromium 问题：345205。

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

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

当 Service Worker 调用设置的超时函数时，Debugger 会暂停。

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)。
  • 覆盖范围：
    • 修复了格式整齐的代码的逐行覆盖率问题 (1464974)。
    • 现在，页面重新加载时覆盖率信息会更新 (1494457)。
  • 控制台：
    • 修复了消息中部分文本选择的问题 (1487449)。
    • 修复了自动补全下拉菜单的闪烁问题 (1487453)。
    • 支持在堆栈路径和堆栈轨迹中的网址内包含圆括号 (1473926)。
  • 来源：支持 TypeScript using 关键字的语法突出显示 (1490515)。
  • 快速打开菜单现在会显示私有方法 (1492957)。
  • 应用 > 后台服务：现在，顶部操作栏会在调整大小时自动换行 (1487276)。
  • 元素 > 样式：
    • 修复了槽位元素的继承 CSS 变量的解析 (1492162)。
    • 停用 CSS 属性时，系统会移除其注释，以修正语法中断问题 (1101224)。
  • 网络：Priority 列现在会显示一个提示，其中包含有关初始优先级的信息（选中Big request rows [Big request rows]时也是如此 (1495735)。
  • 弃用：
    • 颜色格式设置在以前的版本中已停用，现在已被移除。
    • 在简化替换设置 (1473681) 后，由于使用率较低，来源中的“删除所有替换项”选项现已移除。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文：@ChromeDevTools。
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59