此页面由 Cloud Translation API 翻译。

开发者工具的新变化 (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 报告均为导航报告。
时间跨度报告可分析任意时间段，通常包含用户互动。
快照报告分析的是处于特定状态的网页，通常是在用户与其互动之后。

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

时间跨度模式

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

Chromium 问题：1291284

效果数据分析更新

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

现在，开发者工具将根据鼠标光标而非进度条指针位置进行放大。借助最新的基于光标的缩放功能，您可以将鼠标移至轨道中的任何位置，然后立即放大到所需区域。

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

Chromium 问题：1313382

确认删除表演录音

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

确认删除表演录音

Chromium 问题：1318087

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

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

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

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

Chromium 问题：1146146

选择浏览器之外的颜色

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

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

选择浏览器之外的颜色

Chromium 问题：1245191

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

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

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

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

Chromium 问题：1316340

支持为虚拟身份验证器使用大型 blob

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

此复选框默认处于停用状态。您可以仅为采用 ctap2 协议、支持常驻密钥的身份验证器启用该设置。

支持为虚拟身份验证器使用大型 blob

Chromium 问题：1321803

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

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

使用 Control / Command + Shift + Y 切换导航边栏（左侧）
使用 Ctrl / Command + Shift + H 切换debugger边栏（右侧）

为“来源”面板新增了键盘快捷键

Chromium 问题：1226363

源代码映射改进

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

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

为提升整体调试体验，我们对源代码映射进行了以下修复：

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

Chromium 问题：1319828、1318635、1305475

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。