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

Jecelyn Yeen

在 Recorder 中按步骤重放

现在，您可以在 Recorder 面板中设置断点，并逐步重放用户流。

如需设置断点，请点击相应步骤旁边的蓝点。重放用户流程，重放操作会在执行相应步骤之前暂停。在此处，您可以继续重放、执行步骤或取消重放。

借助此功能，您可以轻松直观呈现和调试用户体验历程。

如需了解详情，请参阅录音机功能参考文档。

在 Recorder 中按步骤重放

Chromium 问题：1257499

支持“录制器”面板中的鼠标悬停事件

录音机现在支持在录制内容中手动添加鼠标悬停（悬停）步骤。

此演示会在悬停时显示弹出式菜单。尝试录制用户流程并点击菜单项。

如果您现在重放用户体验流程，将会失败，因为 Recorder 不会在录制期间自动捕获鼠标悬停事件。如需解决此问题，请手动添加步骤，以便在点击菜单项之前将鼠标悬停在选择器上。

在录制器中支持鼠标悬停事件

Chromium 问题：1257499

“性能数据分析”面板中的 Largest Contentful Paint (LCP)

LCP 是一项以用户为中心的重要指标，用于衡量用户感知的加载速度。现在，您可以了解 Largest Contentful Paint (LCP) 的关键路径和根本原因。

在效果录制中，点击时间轴中的 LCP 标记。在详细信息窗格中，您可以查看 LCP 得分，了解如何修复导致 LCP 延迟的资源，以及查看 LCP 资源的关键路径。

查看性能分析，了解如何通过该面板获取富有实用价值的分析洞见并提升网站的性能。

“性能数据分析”面板中的 LCP

Chromium 问题：1326481

将文字闪烁 (FOIT、FOUT) 确定为布局偏移的潜在根本原因

效果分析面板现在会检测不可见文本闪烁 (FOIT) 和未设置样式的文本闪烁 (FOUT)，以确定它们是否是导致布局偏移的潜在根本原因。

如需查看布局偏移的潜在根本原因，请点击布局偏移轨道中的屏幕截图。

请参阅优化 WebFont 加载和渲染，了解防止布局偏移的技术。

“性能数据分析”面板中的 FOUT

Chromium 问题：1334628、1328873

“清单”窗格中的协议处理程序

您现在可以使用开发者工具测试渐进式 Web 应用 (PWA) 的网址协议处理程序注册。

通过网址协议处理程序注册，已安装的 PWA 可以处理使用特定协议（例如 magnet、web+example）的链接，从而提供更集成的体验。

依次前往 Application（应用）> Manifest（清单）窗格，然后前往 Protocol Handlers（协议处理程序）部分。您可以在此处查看和测试所有可用协议。

例如，安装此演示版 PWA。在 Protocol Handlers 部分中，输入“americano”，然后点击 Test protocol 以在 PWA 中打开咖啡页面。

“清单”窗格中的协议处理程序

Chromium 问题：1300613

“元素”面板中的顶层标记

使用顶层标记了解顶层的概念，并直观地了解顶层内容的变化方式。

<dialog> 元素最近在各浏览器中已变为稳定状态。当您打开对话框时，系统会将其放入顶层。顶级内容会在所有其他内容之上呈现。

在此演示中，点击打开对话框。

为了帮助直观呈现顶层元素，DevTools 会向 DOM 树添加顶层容器 (#top-layer)。它位于闭合 </html> 标记之后。

如需从顶层容器元素跳转到顶层树元素，请点击顶层容器中相应元素或其背景图片旁边的展开按钮。

点击顶层树元素（例如对话框元素）旁边的顶层标记，即可跳转到顶层容器。

“元素”面板中的顶层标记

Chromium 问题：1313690

在运行时附加 Wasm 调试信息

您现在可以在运行时为 wasm 附加 DWARF 调试信息。以前，Sources 面板仅支持将源代码映射附加到 JavaScript 和 Wasm 文件。

在 Sources 面板中打开 Wasm 文件。在编辑器中点击右键，然后选择 Add DWARF debugging info…（添加 DWARF 调试信息…）以按需附加调试信息。

ALT_TEXT_HERE

Chromium 问题：1341255

支持在调试期间实时编辑

现在，您无需重启调试程序，即可修改堆栈顶部的函数。

在 Chrome 104 中，DevTools 重新引入了重启帧功能。不过，您无法修改当前暂停的函数。开发者通常会在函数中断点，然后在暂停状态下修改该函数。

在此更新中，调试程序会自动重启函数，但存在以下限制：

  • 暂停时，只能修改顶部的函数
  • 不会对堆栈下方相同的函数进行递归调用

在调试期间实时修改

Chromium 问题：1334484

在“样式”窗格中查看和修改 @scope at 规则

现在，您可以在样式窗格中查看和修改 CSS @scope at-rule。

@scope at 规则是 CSS 级联和继承级别 6 规范的一部分。借助这些规则，开发者可以在 CSS 中限定样式规则的范围。

打开此演示页面，然后检查 <div class=”dark-theme”> 元素中的超链接。在样式窗格中，查看 @scope at-rule。点击规则声明以进行修改。

“样式”窗格中的 @scope at 规则

Chromium 问题：1337777

来源映射改进

以下是一些源代码映射修复程序，可改善整体调试体验：

  • 现在，DevTools 可以正确解析包含标点符号的源代码映射标识符。一些新型缩减工具（例如 esbuild）会生成将标识符与后续标点符号（英文逗号、圆括号、英文分号）合并的源代码映射。
  • DevTools 现在会使用 super 调用解析构造函数的源代码映射名称。ALT_TEXT_HERE
  • 修复了重复规范网址的源代码映射网址编入索引问题。之前，由于存在重复规范网址，某些文件中的断点无法激活。

Chromium 问题：1335338、1333411

其他亮点

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

  • 删除本地存储键值对时，请从 Application（应用）> Local Storage（本地存储）窗格中的表中正确移除该键值对。(1339280)
  • 现在，在 Sources 面板中查看 CSS 文件时，颜色预览会正确显示。之前，这些图标的位置有误。(1340062)
  • 在 Layout 窗格中一致地显示 CSS flex 和网格项，并在 Elements 面板中将其显示为标记。以前，这两个位置会随机缺少 flex 和网格项。（1340441、1273992）
  • 如果开发者工具找到导致广告框架被标记为广告的脚本，则会为该框架提供新的创作者广告脚本链接。您可以依次选择应用 > 帧，打开帧。(1217041)

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。