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

Jecelyn Yeen

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

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

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

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

如需了解 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

确认删除表演录制

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

Chromium 问题：1318087

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

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

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

Chromium 问题：1146146

在浏览器之外选择颜色

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

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

Chromium 问题：1245191

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

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

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

Chromium 问题：1316340

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

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

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

Chromium 问题：1321803

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

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

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

Chromium 问题：1226363

改进了源映射

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

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

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

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

Chromium 问题：1319828、1318635、1305475

下载预览渠道

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

与 Chrome DevTools 团队联系

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

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

开发者工具的新变化

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