DevTools 新功能(Chrome 103)

Published on Updated on

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

感谢 流浪大法师 @liuliangsir 提供的翻译

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

Recorder 面板捕获双击和右击事件

Recorder 面板现在能够捕获双击和右击事件。

Recorder 面板捕获双击和右击事件

在这个例子里面,可以开始 recording 并尝试执行以下步骤:

  • 双击卡片来放大该卡片
  • 右击卡片并从右键菜单中选择一个 action

为了了解 Recorder 是如何捕获这些事件,展开讲讲这些步骤:

  • 双击 事件会被捕获为 type: doubleClick
  • 右击 事件会被捕获为 type: click 但事件的 button 属性会被设置为 secondary。通常,鼠标点击事件的 button 值是 primary

Chromium 议题:1300839, 1322879, 1299701, 1323688

Lighthouse 面板支持 timespan 和 snapshot 新模式

您现在可以使用 Lighthouse 来测量您网站的性能,而不仅仅是测量页面加载时的性能。

Lighthouse 面板支持 timespan 和 snapshot 新模式

Lighthouse 面板现在支持 3 种用户流程测量模式:

  • Navigation 报告可以分析单个页面加载时的性能。Navigation 是最常见的报告类型。在当前版本之前,所有的 Lighthouse 报告都是使用 navigation 模式。
  • Timespans 报告可以分析任意时间段的性能,通常包含用户交互。
  • Snapshots 报告可以分析特定状态下的页面,通常发生在用户与页面交互之后。

比如,让我们用这个 demo 页面 来测量把商品添加到购物车的性能。选择 Timespan 模式并点击 开始 timespan。滚动并添加几个商品到购物车。一旦完成,点击 结束 timespan 来生成 Lighthouse 报告。

Timespan 模式

查阅 [Lighthouse 用户流程文档](https://github.com/GoogleChrome/lighthouse/blob/master/docs/user-flows.md)以便于了解每种模式的独特用例,优点和限制。

Chromium 议题:1291284

Performance Insights 更新

改进 Performance Insights 面板的缩放控制问题

DevTools 现在会根据鼠标的位置来缩放,而不是播放指针的位置。有了最新的鼠标缩放功能,您不但可以随意移动鼠标,而且还可以通过 zoom in 的方式瞬间抵达指定区域。

查阅 Performance Insights 文档 以便于了解如何获取可行的 insights,以及如何使用面板来改善网站的性能。

Chromium 议题:1313382

对删除性能记录的操作进行确认

DevTools 现在会在删除性能记录之前显示一个确认对话框。

对删除性能记录的操作进行确认

Chromium 议题:1318087

重新排列 Elements 面板中的窗格

您现在可以根据您的喜好来重新排列 Elements 面板中的窗格。

例如,当您在窄屏上打开 DevTools,Accessibility 窗格会被隐藏在 Show more 按钮下。如果您需要经常调试 Accessibility 问题,那么您现在可以将 Accessibility 窗格拖到前面,以便于更容易访问。

重新排列 Elements 面板中的窗格

Chromium 议题:1146146

支持在浏览器外面选择颜色

DevTools 现在支持在浏览器外面选择颜色。在此之前,您只能在浏览器里面选择颜色。

Styles 窗格中,点击任意预览颜色来打开颜色选择器。使用滴管工具来实现从任意地方选择颜色。

支持在浏览器外面选择颜色

Chromium 议题:1245191

改进调试期间的 inline 值预览问题

调试器现在可以显示正确的 inline 值预览。

在这个例子中,double 函数有一个输入参数 a 和一个变量 x。在 return 行放置一个断点并运行代码。inline 预览显示 ax 的值正确。在此之前,调试器不会显示 x 的值。

改进调试期间的 inline 值预览问题

Chromium 议题:1316340

virtual authenticators 支持大型 blob

现在,WebAuthn 选项卡拥有新的 Supports large blob 复选框,用于 virtual authenticators。

该复选框默认是处于禁用状态。您现在只可以为那些已支持 resident keys 以及 ctap2 协议的 authenticators 启用该复选框。

virtual authenticators 支持大型 blob

Chromium 议题:1321803

Sources 面板支持新的键盘快捷键

Sources 面板中,可以使用两个新的键盘快捷键:

  • 切换 navigation 工具栏 (左侧) 使用 Control / Command + Shift + Y
  • 切换 debugger 工具栏 (右侧) 使用 Control / Command + Shift + H
Sources 面板支持新的键盘快捷键

Chromium 议题:1226363

Sourcemaps 改进

在此之前,开发者会随机遇到以下问题:

  • 在调试 Codepen 示例的过程中,会遇到一些问题
  • 在定位 Codepen 示例所出现性能问题的过程中,会遇到一些问题
  • 在启用 React DevTools 的前提下,出现丢失 Component 选项卡的情况

这里有几个对 sourcemaps 的改进,旨在提高整体调试体验:

  • 针对行内脚本(inline scripts)和源码位置(source location),修正位置跟偏移之间的映射关系
  • 针对 frame 的文本位置,使用 fallback 信息
  • 使用 frame 的 URL 来正确解析相对路径

Chromium 议题:1319828, 1318635, 1305475

下载 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.