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

Jecelyn Yeen

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

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

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

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

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

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

Chromium 问题：1300839、1322879、1299701、1323688

Lighthouse 面板中新增了时间跨度模式和快照模式

您现在可以使用 Lighthouse 来衡量网站的性能，而不仅仅是网页加载速度。

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

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

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

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

Chromium 问题：1291284

“效果数据分析”方面的更新

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

现在，开发者工具将根据鼠标光标位置而非播放头位置进行放大。借助最新的基于光标的缩放功能，您可以将鼠标移动到轨道中的任意位置，并立即放大到所需区域。

请参阅性能洞见，了解如何获取富有实用价值的分析洞见，以及如何使用该面板来提升网站性能。

Chromium 问题：1313382

确认删除表演录制内容

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

Chromium 问题：1318087

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

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

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

Chromium 问题：1146146

在浏览器外部选择颜色

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

在样式窗格中，点击任意颜色预览即可打开颜色选择器。使用取色器从任意位置选择颜色。

Chromium 问题：1245191

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

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

在此示例中，double 函数具有输入参数 a 和变量 x。在 return 行中添加断点，然后运行代码。内嵌预览会正确显示值 a 和 x。以前，调试器不会在内嵌预览中显示值 x。

Chromium 问题：1316340

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

WebAuthn 标签页现在新增了适用于虚拟身份验证器的支持大型 blob 复选框。

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

Chromium 问题：1321803

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

来源面板中现已提供两个新的键盘快捷键：

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

Chromium 问题：1226363

改进了源映射

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

• 使用 Codepen 示例进行调试
• 在 Codepen 示例中确定性能问题的来源位置
• 启用 React 开发者工具时，缺少 Component 标签页

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

• 修正了内嵌脚本和源代码位置的位置与偏移量之间的映射
• 使用框架文本位置的后备信息
• 正确解析带有框架网址的相对网址

Chromium 问题：1319828、1318635、1305475

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试最前沿的 Web 平台 API，并在用户发现问题之前帮助您找到网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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