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

Jecelyn Yeen

在录音机中逐步重放

您现在可以在 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) 闪烁 (FOIT) 和未设置样式的文字闪烁 (FOUT) 作为导致布局偏移的潜在根本原因。

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

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

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

Chromium 问题：1334628、1328873

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

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

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

前往 Application > Protocol Handlers（协议处理程序）部分Manifest 窗格。您可以在此处查看和测试所有可用的协议。

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

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

Chromium 问题：1300613

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

使用顶层标记了解顶层的概念并直观呈现顶层内容的变化情况。

<dialog> 元素最近已在各个浏览器中保持稳定。在您打开对话框时，该对话框会置于顶层。顶级内容会呈现在其他所有内容之上。

在此demo中，点击 Open dialog（打开对话框）。

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

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

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

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

Chromium 问题：1313690

在运行时附加 Wasm 调试信息

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

在 Sources 面板中打开 Wasm 文件。在编辑器中点击右键，然后选择 Add DWARF debugging info... 根据需要附加调试信息。

ALT_TEXT_HERE

Chromium 问题：1341255

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

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

在 Chrome 104 中，开发者工具恢复了 restart frame 功能。不过，您无法修改当前暂停的函数。开发者通常会中断某个函数，然后在该函数暂停时对其进行修改。

进行此更新后，调试程序将自动重启函数，但存在以下限制：

  • 在暂停期间，只能修改最顶层的函数
  • 不再对堆栈中更靠下端的同一函数进行递归调用

调试期间的实时编辑

Chromium 问题：1334484

在“Styles”（样式）窗格中的 rules 中查看和修改 @scope

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

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

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

“Styles”窗格中的 @scope at rules

Chromium 问题：1337777

源代码映射改进

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

  • 开发者工具现在可以正确解析带有标点符号的来源映射标识符。一些新型缩减器（例如 esbuild）会生成会合并标识符的源映射 后跟标点符号（逗号、圆括号、分号）。
  • 现在，开发者工具会通过调用 super 来解析构造函数的源映射名称。 ALT_TEXT_HERE
  • 修复了重复规范网址的来源映射网址索引问题。之前，由于存在重复的规范网址，因此某些文件中不会激活断点。

Chromium 问题：1335338、1333411

其他亮点

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

  • 从应用 > 中的表内正确移除本地存储键值对Local Storage 窗格。(1339280)
  • 现在，在 Sources 面板中查看 CSS 文件时，颜色预览会正确显示。之前，他们的广告位置放错了位置。(1340062)
  • 在布局窗格中一致地显示 CSS Flex 和网格项，并在元素面板中将它们显示为标记。以前，Flex 和 grid 项在这两个位置都随机缺失。（1340441、1273992）
  • 如果开发者工具找到了导致广告框架被标记为广告的脚本，则会看到新的创作者广告脚本链接。您可以依次点击应用 >框架。(1217041)

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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