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

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

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

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

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

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

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

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

Chromium 问题:1300839132287912997011323688

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 行处添加一个断点并运行代码。内嵌预览会正确显示值 ax。之前,调试程序不会在内嵌预览中显示值 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 问题:131982813186351305475

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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