开发者工具的新变化 (Chrome 103)

Jecelyn Yeen

在“Recorder”面板中捕获双击和右键点击事件

Recorder 面板现在可以捕获双击和右键点击事件。

在“Recorder”面板中捕获双击和右键点击事件

在此示例中，开始录制并尝试执行以下步骤：

  • 双击卡片可放大
  • 右键点击卡片，然后从上下文菜单中选择相应操作

如需了解 Recorder 如何捕获这些事件，请展开相应步骤：

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

Chromium 问题：1300839、1322879、1299701、1323688

Lighthouse 面板中新增了时间范围和快照模式

现在，您可以使用 Lighthouse 来衡量网站在网页加载之后的性能。

Lighthouse 面板中新增了时间范围和快照模式

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

  • “导航”报告会分析单个网页加载。导航是最常见的报告类型。当前版本之前的所有 Lighthouse 报告都是导航报告。
  • “时间跨度”报告可分析任意时间段（通常包含用户互动）。
  • “快照”报告会分析处于特定状态的网页（通常是在用户与其互动之后）。

例如，我们来衡量一下在此演示页面上将商品添加到购物车的效果。选择时间跨度模式，然后点击开始时间跨度。滚动页面，将一些商品添加到购物车。完成后，点击结束时间范围以生成关于用户互动的 Lighthouse 报告。

时间跨度模式

请参阅 Lighthouse 中的用户流，了解每种模式的独特用例、优势和限制。

Chromium 问题：1291284

效果数据分析最新动态

改进了性能数据分析面板中的缩放控件

现在，开发者工具会根据鼠标光标（而非进度条指针的位置）进行放大。借助最新的基于光标的缩放功能，您可以将鼠标移动到航迹中的任意位置，并立即放大到所需的区域。

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

Chromium 问题：1313382

确认删除表演录制内容

现在，开发者工具会在删除性能记录之前显示一个确认对话框。

确认删除表演录制内容

Chromium 问题：1318087

对“元素”面板中的窗格重新排序

现在，您可以根据自己的偏好设置对 Elements 面板中的窗格进行重新排序。

例如，当您在较窄的屏幕上打开开发者工具时，Accessibility 窗格会隐藏在 Show more 按钮下。如果您经常调试无障碍功能问题，现在可以将窗格拖动到最前面，以便更轻松地访问。

对“元素”面板中的窗格重新排序

Chromium 问题：1146146

选择浏览器以外的颜色

开发者工具现在支持在浏览器外部选择颜色。以前，您只能在浏览器中选择颜色。

在 Styles（样式）窗格中，点击任意颜色预览以打开颜色选择器。使用取色器挑选任意位置的颜色。

选择浏览器以外的颜色

Chromium 问题：1245191

改进了调试期间的内嵌值预览

现在，调试程序可以正确显示内嵌值预览。

在此示例中，double 函数有一个输入参数 a 和一个变量 x。在 return 行处添加一个断点并运行代码。内嵌预览会正确显示值 a 和 x。之前，调试程序不会在内嵌预览中显示值 x。

改进了调试期间的内嵌值预览

Chromium 问题：1316340

支持用于虚拟身份验证器的大型 blob

WebAuthn 标签页现在为虚拟身份验证器新增了 Supports large blob 复选框。

此复选框默认处于停用状态。您可以只为使用支持常驻密钥的 ctap2 协议的身份验证器启用此功能。

支持用于虚拟身份验证器的大型 blob

Chromium 问题：1321803

“Sources”面板中的新键盘快捷键

Sources 面板中现在新增了两个键盘快捷键：

  • 使用 Ctrl / Command + Shift + Y 切换导航边栏（左侧）
  • 使用 Ctrl / Command + Shift + H 切换调试程序边栏（右侧）

“来源”面板的新键盘快捷键

Chromium 问题：1226363

源代码映射改进

之前，开发者会在以下期间遇到随机故障：

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

  • 更正内嵌脚本和来源位置的位置和偏移量之间的映射
  • 使用有关帧文本位置的后备信息
  • 使用框架的网址正确解析相对网址

Chromium 问题：1319828、1318635、1305475

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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