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

Jecelyn Yeen

在 Recorder 中逐步重放

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

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

借助此功能，您可以轻松全面地直观呈现和调试用户流程。

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

Chromium 问题：1257499

支持在“Recorder”面板中悬停鼠标

录制工具现在支持在录制过程中手动添加鼠标悬停步骤。

此演示展示了悬停时的弹出式菜单。尝试录制用户流并点击某个菜单项。

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

Chromium 问题：1257499

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

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

在性能记录中，点击时间轴中的 LCP 徽章。在详细信息窗格中，您可以查看 LCP 得分，了解如何修复会减慢 LCP 速度的资源，以及查看 LCP 资源的关键路径。

请参阅性能洞见，了解如何获取富有实用价值的分析洞见，以及如何使用该面板来提升网站性能。

Chromium 问题：1326481

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

性能洞见面板现在可以检测到不可见文本闪烁 (FOIT) 和无样式文本闪烁 (FOUT)，并将它们视为布局偏移的潜在根本原因。

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

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

Chromium 问题：1334628、1328873

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

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

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

通过应用 > 清单窗格，前往协议处理程序部分。您可以在此处查看和测试所有可用的协议。

例如，安装此演示 PWA。在协议处理程序部分中，输入“americano”，然后点击测试协议，以在 PWA 中打开咖啡页面。

Chromium 问题：1300613

“元素”面板中的顶层徽章

使用顶层徽章了解顶层概念，并直观呈现顶层内容的变化。

<dialog> 元素最近在各个浏览器中都已稳定。当您打开对话框时，它会被放置在顶层。顶级内容会渲染在所有其他内容之上。

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

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

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

在顶层树元素（例如对话框元素）旁边，点击顶层徽章，跳转到顶层容器。

Chromium 问题：1313690

在运行时附加 Wasm 调试信息

您现在可以在运行时附加 wasm 的 DWARF 调试信息。以前，“Sources”（来源）面板仅支持将源映射附加到 JavaScript 和 Wasm 文件。

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

Chromium 问题：1341255

支持在调试期间进行实时编辑

现在，您无需重启调试器即可修改堆栈中最顶层的函数。

在 Chrome 104 中，开发者工具重新引入了重新启动帧功能。不过，您无法修改当前暂停的函数。开发者通常会在函数中设置中断点，然后在暂停时编辑该函数。

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

• 暂停时只能修改最顶层的函数
• 堆栈中没有对同一函数的进一步递归调用

Chromium 问题：1334484

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

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

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

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

Chromium 问题：1337777

改进了源映射

以下是针对源映射的一些修复，可改善整体调试体验：

• DevTools 现在可以正确解析带有标点符号的源映射标识符。某些新式缩小器（例如 esbuild）生成的源映射会将标识符与后续标点符号（逗号、圆括号、分号）合并。
• 开发者工具现在可以解析包含 super 调用的构造函数的源代码映射名称。
• 修复了重复规范网址的来源映射网址索引编制问题。之前，由于存在重复的规范网址，某些文件中的断点未被激活。

Chromium 问题：1335338、1333411

其他亮点

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

• 在删除本地存储键值对时，正确地从应用 > 本地存储窗格中的表中移除该键值对。(1339280)
• 现在，在 Sources 面板中查看 CSS 文件时，颜色预览会正确显示。之前，这些位置放置有误。(1340062)
• 在布局窗格中始终显示 CSS 弹性布局和网格项，并在元素面板中以徽章形式显示它们。之前，Flex 和网格项在这两个位置都会随机丢失。（1340441、1273992）
• 如果开发者工具发现导致框架被标记为广告的脚本，则会显示新的创作者广告脚本链接（适用于广告框架）。您可以通过应用 > 框架打开框架。(1217041)

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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