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

Sofia Emelianova
Sofia Emelianova

逐步弃用第三方 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 问题:14893121291064

在源代码映射中将 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 问题:14924601489721

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

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

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

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

Chromium 问题:345205

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

Sources 中设置事件断点时事件监听器断点:除了在您的网站上暂停此事件之外,Debugger 现在还会在任何类型的 Web Workerworklet 中发生相应事件时暂停,包括 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 问题:14886451484918

其他亮点

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

  • 性能:修复了记录中有时缺少 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)。
  • 弃用: <ph type="x-smartling-placeholder">
      </ph>
    • 颜色格式设置在以前的版本中已停用,并且现在已被移除。
    • 由于在简化替换项 (1473681) 后使用率较低,来源中的“删除所有替换项”选项现已被移除。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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