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

Jecelyn Yeen

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

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

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

Chromium 问题：1101268、1382044

录音机更新

在录制器中查看并突出显示用户体验历程的代码

录制器现在提供分屏代码视图，可让您更轻松地查看用户体验流程代码。如需访问代码视图，请打开某个用户体验历程，然后点击显示代码。

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

Chromium 问题：1385489

自定义录制的选择器类型

您可以创建录制内容，仅捕获您关注的选择器类型。借助在创建新录制内容时自定义选择器类型的新选项，您可以包含或排除 XPath 等选择器，确保仅在用户体验历程中捕获所需的选择器。

Chromium 问题：1384431

在录制过程中修改用户流

录音机现在支持在录制过程中进行编辑，让您可以灵活地实时进行更改。您无需结束录制即可进行调整。

Chromium 问题：1381971

自动就地美观输出

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

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

Chromium 问题：1383453、1382752、1382397

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

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

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

此外，DevTools 现在会在 Sources 面板中显示样式的源代码映射。例如，打开 SCSS 文件时，您可以点击源映射链接来访问相关的 CSS 文件。

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

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

通过实现以下更改，DevTools 改进了自动补全体验：

• 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

其他亮点

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

• 修复了 DevTools 中的回归问题，该问题会导致 DevTools 无法在内嵌脚本中的 debugger 语句处停止。(1385374)
• 新增了控制台设置，可让您默认展开或收起 console.trace() 消息。依次点击设置 > 偏好设置 > 默认展开 console.trace() 消息，即可切换相应设置。(1139616)
• Sources 面板中的 Snippets 窗格支持增强型自动补全功能，与 Console 类似。(772949)

下载预览渠道

不妨考虑将 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 新变化系列中涵盖的所有内容的列表。