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

在录音机中逐步重放

您现在可以在 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 问题:13346281328873

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

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

通过注册网址协议处理程序,已安装的 PWA 可以处理使用特定协议(例如 magnetweb+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

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

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

“Styles”窗格中的 @scope at rules

Chromium 问题:1337777

源代码映射改进

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

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

Chromium 问题:13353381333411

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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