DevTools 新功能(Chrome 105)

Published on Updated on

Translated to: English, Español, Português, 한국어, Pусский, 日本語

感谢 Poong Zui Yong 提供的翻译

有兴趣帮忙改进 DevTools 吗?请注册并参与 Google 用户体验调研

录制面板中的分步重放

您现在可以录制面板中对用户流程进行分步重放和设置断点。

点击步骤侧边的蓝点以设置断点,然后重放您的用户流程。该重放动作将在执行该步骤前暂停。 从这里,您可以选择继续重放、执行一个步骤或取消重放。

借助此功能,您可以完全控制用户流程的重播,令调试更方便。

参阅录制面板功能参考以获取更多相关信息,。 Step-by-step replay in the Recorder

Chromium 议题: 1257499

支持录制面板中的鼠标悬浮事件

录制面板现在支持在录制中手动加入鼠标悬停步骤。

此演示 显示悬停时的弹出菜单. 在录制用户流程时,单击菜单项。

现在,如果您重播用户流程,它将会失败。因为 录制面板 在录制期间并没有自动捕获鼠标悬停事件。 要解决此问题,请 手动添加步骤 ,在单击菜单项之前,将鼠标悬停在选择器上。 Support mouse over event in the Recorder

Chromium 议题: 1257499

Performance insights 面板中的最大内容绘制 (LCP)

最大内容绘制 (LCP) 是测量感知加载速度的一个以用户为中心的重要指标。 您现在可以找出 最大内容绘制 (LCP) 的关键路径和根本原因。

性能录制 中,单击 时间线 中的 LCP 徽章。 在 细节 边栏中,您可以查看 LCP 分数,了解如何修复降低 LCP 速度的资源并查看 LCP 资源的关键路径。

参阅 Performance insights 文档以了解如何通过此面板获得可行性的建议并提高网站的性能。 LCP in the Performance insights panel

Chromium 议题: 1326481

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

Performance insights面板现在可以检测 flash of invisible text (FOIT) 和 flash of unstyled text (FOUT) 作为布局偏移的根本原因。

单击 Layout shifts 轨道中的屏幕截图,以便查看布局偏移的潜在根本原因。

请参阅 优化 WebFont 加载和渲染 以了解防止布局偏移的技术。 FOUT in the Performance insights panel

Chromium 议题: 1334628, 1328873

Manifest 窗格中的协议处理程序

您现在可以使用 DevTools 测试渐进式网络应用 (PWA)URL 协议处理程序注册

URL 协议处理程序注册允许已安装的 PWA 处理使用特定协议的链接(例如 magnetweb+example)以获得更集成的体验。

通过 Application > Manifest 窗格导航到 Protocol Handlers 部分。 您可以在此处查看和测试所有可用的协议。

例如,安装 this demo PWA。 在 Protocol Handlers 部分,输入“americano”并单击 Test protocol 以打开 PWA 中的咖啡页面。 Protocol handlers in the Manifest pane

Chromium 议题: 1300613

元素面板中的顶层徽章

使用【顶层徽章】(/blog/top-layer-devtools/#top-layer-support-design-in-devtools) 了解顶层的概念,可视化顶层内容的变化。

<dialog> 元素 最近在浏览器中变得稳定。 当您打开一个对话框时,它会被放入一个 top layer。 顶层内容呈现在所有其他内容之上。

在此 演示 中,单击 Open dialog

为了帮助可视化顶层元素,DevTools 将顶层容器(#top-layer)添加到 DOM 树中。 它位于结束 </html> 标记之后。

要从顶层容器元素跳转到顶层树元素,请单击顶层容器中元素旁边的 reveal 按钮或其背景。

在顶层树元素(例如对话框元素)旁边,单击 top-layer 徽章以跳转到顶层容器。 Top layer badge in the Elements panel

Chromium 议题: 1313690

在运行时附加 Wasm 调试信息

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

Sources 面板中打开一个 Wasm 文件。 在编辑器中右键单击并选择 Add DWARF debugging info… 以按需附加调试信息。 ALT_TEXT_HERE

Chromium 议题: 1341255

调试时支持实时编辑

您现在可以编辑堆栈上最顶层的函数,而无需重新启动调试器。

在 Chrome 104 中,DevTools 恢复了 restart frame 功能。 但是,您无法编辑当前暂停的函数。开发人员通常会中断一个函数,然后在暂停时编辑该函数。

通过此更新,调试器会自动重新启动该功能,但具有以下限制:

暂停时只能编辑最顶层的函数 在堆栈的更下方对同一函数没有递归调用 live edit during debugging

Chromium 议题: 1334484

在样式窗格的规则中查看和编辑@scope

您现在可以在 Styles 窗格中查看和编辑 CSS @scope at-rules

规则中的 @scopeCSS Cascading and Inheritance Level 6 规范 的一部分。 这些规则允许开发人员在 CSS 中定义样式规则。

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

CSS @scope 目前正在开发中。 要测试此功能,请通过 chrome://flags/#enable-experimental-web-platform-features 启用 Experimental Web Platform features 标志。

@scope at rules in the Styles pane

Chromium 议题: 1337777

Sourcemap 改进

以下是对 sourcemaps 的一些修复,以改善整体调试体验:

DevTools 现在可以正确解析带有标点符号的 sourcemaps 标识符。 一些现代缩小器(例如,esbuild) 生成 sourcemaps 时将标识符与后续标点符号(逗号、括号、分号)合并。

DevTools 现在使用 super 调用解析构造函数的 sourcemap 名称。 ALT_TEXT_HERE

修复了重复的规范 URL 的 source map URL 索引。 以前,由于重复的规范 URL ,在某些文件中没有激活断点。

Chromium 议题: 1335338, 1333411

其他的更新

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

  • Application > Local Storage 窗格中的表正确删除本地存储键值对。 (1339280)
  • 在源代码面板中查看 CSS 文件时,正确显示颜色预览。 此前,它们的位置错位了。 (1340062)
  • Layout 边栏中始终显示 CSS flex 和 grid 元素,并在 元素 面板中将它们显示为徽章。 以前,flex 和 grid 元素会在这两个地方都随机丢失。 (1340441, 1273992)
  • [广告框架] (https://chromium.googlesource.com/chromium/src/+/master/docs/ad_tagging.md#adtracker)里新增 Creator Ad Script 链接。 当 DevTools 搜索到了导致框架被标记为广告的脚本时,您可以通过 Application > Frames 打开框架。 (1217041)

下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版(Dev)测试版(Beta) 设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ,让您抢先在用户之前发现您网站上的问题!

联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进,或一切关于 DevTools 的一切。

  • 提交建议或意见回馈:crbug.com.
  • 报告 DevTools 问题:打开 DevTools,按 更多选项图标   More   > 帮助 > 报告 DevTools 问题
  • 在推特上,发推文: @ChromeDevTools.
  • 在我们的 What's new in DevTools YouTube 视频底下留言。

更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.