开发者工具的新变化 (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 中的语法突出显示。

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

适用于 Vue 的内嵌预览。

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

SASS 的来源映射链接。

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

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

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

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

例如，当您在管理中心中输入 cons 时，会出现以下情况：

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

  • 当您按 Enter 时，控制台会执行该行。以前，它会自动使用首个建议自动补全行。如需自动补全，请按 Tab 或 Arrow Right。 在按下 Enter 键时执行该行。

  • 当您使用 Arrow up 和 Arrow down 快捷键浏览建议列表时，控制台会突出显示所选选项。 浏览建议期间的亮点。

  • 如需在导航期间使用所选选项自动补全，请使用键盘键 Tab、Enter 或 Arrow Right。 在导航过程中使用所选选项自动补全。

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

Chromium 问题：1399436、1276960

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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