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

Jecelyn Yeen

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

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

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

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

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

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

Chromium 问题：1300839、1322879、1299701、1323688

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

现在，您可以使用 Lighthouse 衡量网站的网页加载性能以外的其他性能。

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

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

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

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

Chromium 问题：1291284

效果数据分析更新

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

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

查看性能分析，了解如何通过该面板获取富有实用价值的分析洞见并提升网站的性能。

Chromium 问题：1313382

确认删除表演录制

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

Chromium 问题：1318087

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

现在，您可以根据自己的偏好，在元素面板中重新排列窗格。

例如，当您在窄屏设备上打开 DevTools 时，无障碍窗格会隐藏在展开按钮下方。如果您经常调试无障碍功能问题，现在可以将该窗格拖动到前面，以便更轻松地访问。

Chromium 问题：1146146

在浏览器之外选择颜色

现在，DevTools 支持在浏览器之外选择颜色。以前，您只能在浏览器中选择颜色。

在 Styles 窗格中，点击任意颜色预览以打开颜色选择器。使用取色器从任何位置选择颜色。

Chromium 问题：1245191

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

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

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

Chromium 问题：1316340

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

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

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

Chromium 问题：1321803

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

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

• 按 Control / Command + Shift + Y 切换导航边栏（左侧）
• 按 Ctrl / Command + Shift + H 切换调试程序边栏（位于右侧）

Chromium 问题：1226363

改进了源映射

以前，开发者在以下过程中会遇到随机失败的情况：

• 使用 Codepen 示例进行调试
• 在 Codepen 示例中确定性能问题的源代码位置
• 启用 React DevTools 后缺少 Component 标签页

以下是一些源代码映射修复程序，可改善整体调试体验：

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

Chromium 问题：1319828、1318635、1305475

下载预览渠道

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

与 Chrome DevTools 团队联系

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

• 请访问 crbug.com 向我们提交反馈和功能请求。
• 在 DevTools 中，依次选择 more_vert More options > Help > Report a DevTools issue 以报告 DevTools 问题。
• 向 @ChromeDevTools 发送推文。
• 在 “开发者工具的新变化”YouTube 视频或 “开发者工具提示”YouTube 视频中留言。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。