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

Jecelyn Yeen

在重新加载时清除性能面板

现在，当您点击开始分析并重新加载页面按钮时，性能面板会同时清除屏幕截图和轨迹。

之前，效果面板会显示一个时间轴，其中包含之前录制的屏幕截图。这使得很难确定实际测量何时开始。该面板现在始终先导航到 about:blank 页面，以确保录制从空白轨迹开始。这与已实现相同功能的性能数据分析面板保持一致。

Chromium 问题：1101268、1382044

记录器更新

在记录器中查看并突出显示用户流程的代码

记录器现在提供拆分代码视图，让您可以更轻松地查看用户流程代码。如需访问代码视图，请打开用户流程，然后点击显示代码。

当您将鼠标悬停在左侧的每个步骤上时，记录器会突出显示相应的代码，从而方便您跟踪流程。您可以使用下拉菜单更改代码格式，从而在 Nightwatch Test 脚本等格式之间切换。

Chromium 问题：1385489

自定义录制的选择器类型

您可以创建仅捕获对您重要的选择器类型的记录。借助在创建新录制内容时自定义选择器类型的新选项，您可以添加或排除 XPath 等选择器，确保仅在用户流程中捕获所需的选择器。

Chromium 问题：1384431

在录制时修改用户流

录音机现在支持在录制过程中进行编辑，让您能够灵活地实时做出更改。您不再需要结束录制才能进行调整。

Chromium 问题：1381971

自动就地美观输出

“来源”面板现在会自动美观输出缩减过大小的源文件。您可以点击美观输出按钮 { } 来撤消此操作。

以前，来源面板默认显示的是精简版内容。如需格式化内容，您必须手动点击美观打印按钮。不仅如此，美化打印的内容并未显示在同一标签页中，而是显示在另一个 ::formatted 标签页中。

Chromium 问题：1383453、1382752、1382397

更好地突出显示 Vue、SCSS 等的语法并提供内嵌预览

来源面板增强了对多种常用文件格式的语法突出显示功能，让您可以更轻松地读取代码并识别其结构，包括 Vue、JSX、Dart、LESS、SCSS、SASS 和内嵌 CSS。

此外，开发者工具还改进了 Vue、内嵌 HTML 和 TSX 的内嵌预览。将鼠标悬停在变量上，即可预览其值。

除此之外，开发者工具现在会在来源面板中显示样式表的来源映射。例如，当您打开 SCSS 文件时，可以通过点击源映射链接来访问相关的 CSS 文件。

Chromium 问题：1385374、1385632、1385281、1385269、1383892、1361862、1383451、1392106、1149734

控制台中符合人体工程学且一致的自动补全功能

开发者工具通过实现以下更改来增强自动补全体验：

• Tab 始终用于自动完成。
• Arrow right 和 Enter 的行为因上下文而异。
• 自动补全体验在文本编辑器、控制台、来源和元素面板中保持一致

例如，在 控制台中输入 cons 时，会发生以下情况：

• 控制台会显示自动填充建议列表，其中顶部选项周围会显示细微的虚线边框，表示导航尚未开始。

• 当您按 Enter 时，控制台会执行该行代码。以前，系统会自动使用排名最高的建议补全该行。如需自动补全，请按 Tab 或 Arrow Right。

• 当您使用 Arrow up 和 Arrow down 快捷键在建议列表中导航时，控制台会突出显示所选选项。

• 如需在导航期间使用所选选项自动完成，请使用键盘按键 Tab、Enter 或 Arrow Right。

• 在代码中间进行编辑时（例如，当光标位于 n 和 s 之间时），使用 Tab 进行自动补全，使用 Enter 执行相应行，使用 Arrow Right 将光标向前移动。

Chromium 问题：1399436、1276960

其他亮点

以下是此版本中的一些值得注意的修复：

• 修复了开发者工具中的一个回归问题，即无法在内嵌脚本中的 debugger 语句处停止。(1385374)
• 新增了控制台设置，可让您默认展开或收起 console.trace() 消息。通过以下方式切换设置：设置 > 偏好设置 > 默认展开 console.trace() 消息。(1139616)
• 来源面板中的代码段窗格支持增强型自动补全，与控制台类似。(772949)

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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