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

Jecelyn Yeen

“录音机”中的分步重放

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

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

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

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

“录音机”中的分步重放

Chromium 问题：1257499

在“记录器”面板中支持鼠标悬停事件

Recorder 现在支持在录音中手动添加鼠标悬停步骤。

此演示会在鼠标悬停时显示弹出式菜单。尝试记录用户流，然后点击菜单项。

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

支持在录音机上悬停鼠标事件

Chromium 问题：1257499

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

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

在性能记录中，点击 Timeline 中的 LCP 标志。在详细信息窗格中，您可以查看 LCP 得分，了解如何修复会降低 LCP 速度的资源，并查看 LCP 资源的关键路径。

请参阅效果数据分析，了解如何通过该面板获取富有实用价值的分析洞见并提升网站的效果。

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

Chromium 问题：1326481

确定闪光灯（FOIT、FOUT）是导致布局偏移的潜在根本原因

现在，效果数据分析面板可以检测到不可见文本闪烁 (FOIT) 和无样式文本闪烁 (FOUT)，这是导致布局偏移的潜在根本原因。

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

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

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

Chromium 问题：1334628、1328873

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

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

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

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

例如，安装此演示 PWA。在 Protocol Handlers（协议处理程序）部分，输入“americano”，然后点击 Test agreement（测试协议），在 PWA 中打开 Coffee 页面。

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

Chromium 问题：1300613

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

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

最近，<dialog> 元素在所有浏览器中已变得稳定。当您打开一个对话框时，它会被添加到顶层。顶级内容会呈现在所有其他内容之上。

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

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

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

在顶层树元素（例如，dialog 元素）旁边，点击 top-layer 标记以跳转到顶层容器。

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

Chromium 问题：1313690

在运行时附加 Wasm 调试信息

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

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

ALT_TEXT_HERE

Chromium 问题：1341255

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

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

在 Chrome 104 中，开发者工具恢复了重启帧功能。不过，您无法修改目前处于暂停状态的函数。开发者经常会中断一个函数，然后在暂停时修改该函数。

进行此更新后，调试程序会自动重启该函数，但遵循以下限制：

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

调试期间的实时编辑

Chromium 问题：1334484

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

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

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

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

“Styles”窗格中规则的 @scope

Chromium 问题：1337777

源代码映射改进

为提升整体调试体验，我们对源代码映射进行了以下修复：

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

Chromium 问题：1335338、1333411

其他亮点

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

  • 在删除表时，在应用 > 本地存储窗格中正确移除表的本地存储键值对。(1339280)
  • 现在，在 Sources 面板中查看 CSS 文件时，颜色预览会正确显示。以前，他们的位置会错位。(1340062)
  • 在 Layout 窗格中始终显示 CSS flex 和网格项，并在 Elements 面板中将它们显示为标志。以前，弹性项和网格项在这两个位置是随机缺失的。（1340441、1273992）
  • 如果开发者工具发现了导致框架被标记为广告的脚本，则会为广告框架提供新的创作者广告脚本链接。您可以通过 Application > Frames 打开帧。(1217041)

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文：@ChromeDevTools。
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59