此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

重新加载时清除性能面板

现在，当您点击 Start profiling and load page 按钮后，Performance 面板会清除屏幕截图和跟踪记录。

以前，Performance 面板会显示时间轴，其中包含先前录制内容的屏幕截图。这使得很难看出实际衡量的开始时间。现在，面板始终会先导航到 about:blank 页面，以确保记录以空白轨迹开始。这与效果数据分析面板一致，后者已执行相同的操作。

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

Chromium 问题：1101268、1382044

录音机更新

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

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

当您将鼠标悬停在左侧的每个步骤上时，Recorder 会突出显示相应的代码，以便于您轻松跟踪自己的流程。您可以使用下拉菜单更改代码格式，以便在格式（例如 Nightwatch Test 脚本）之间切换。

录音机中的代码视图。

Chromium 问题：1385489

自定义录音的选择器类型

您可以创建仅捕获您看重的选择器类型的录制内容。通过在创建新记录时自定义选择器类型的新选项，您可以包含或排除 XPath 等选择器，从而确保用户流中的选择器仅符合您的预期。

用于自定义选择器类型的新选项。

Chromium 问题：1384431

在录制时修改用户体验流程

Recorder 现在允许在录制过程中进行编辑，让您可以灵活地实时进行更改。您不再需要结束录制来进行调整。

在用户体验流记录期间进行修改。

Chromium 问题：1381971

自动就地打印

Sources 面板现在可以自动美观地打印缩减的源文件。您可以点击美观输出按钮 { } 来撤消此操作。

以前，来源面板默认显示缩减后的内容。如需设置内容格式，您必须手动点击“美观打印”按钮。除此之外，美观输出的内容并不在同一个标签页中，而是显示在另一个 ::formatted 标签页中。

在自动就地美观打印前后显示缩小的文件。

Chromium 问题：1383453、1382752、1382397

改进了 Vue、SCSS 等的语法突出显示和内嵌预览功能

Sources 面板改善了几种广泛使用的文件格式的语法突出显示功能，让您可以更轻松地阅读代码并识别其结构（包括 Vue、JSX、Dart、LESS、SCSS、SASS 和内嵌 CSS）。

Vue 中的语法突出显示

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

Vue.

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

SASS 的来源映射链接。

Chromium 问题：1385374、1385632、1385281、1385269、1383892、1361862、1383451、{106、1351}、1351}

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

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

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 设置，可让您默认展开或收起 console.trace() 邮件。通过设置 > 偏好设置 > 默认展开 console.trace() 消息来切换设置。(1139616)
与控制台类似，来源面板中的摘要窗格支持增强型自动补全功能。(772949)

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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