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

Jecelyn Yeen

重新加载时清除性能面板

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

以前，Performance 面板会显示时间轴，其中包含之前录制的屏幕截图。这使得我们难以看出实际衡量的开始时间。该面板现在会始终先转到 about:blank 页面，以保证录制从空白跟踪记录开始。这与效果数据分析面板的实验结果一致。

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

Chromium 问题：1101268、1382044

录音机更新

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

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

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

录音机中的代码视图。

Chromium 问题：1385489

自定义录音的选择器类型

您可以创建仅记录重要选择器类型的录制内容。借助创建新记录时用于自定义选择器类型的新选项，您可以包含或排除 XPath 等选择器，确保只捕获您想要在用户流中使用的选择器。

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

Chromium 问题：1384431

在录制过程中修改用户流

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

在用户流录制期间进行编辑。

Chromium 问题：1381971

自动就地打印

Sources 面板现在会自动就地输出缩小的源文件。您可以点击 pretty print 按钮 { } 撤消此操作。

以前，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、13920、

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

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

  • Tab 始终用于自动补全。
  • Arrow right 和 Enter 的行为因上下文而异。
  • 在 Console、Sources 和 Elements 面板中，不同文本编辑器提供一致的自动补全体验

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

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

  • 当您按 Enter 时，控制台会执行该行。以前，它会自动补全包含热门建议的行。若要自动填充，请按 Tab 或 Arrow Right。 在 Enter 时执行该行。

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

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

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

Chromium 问题：1399436、1276960

其他亮点

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

  • 解决了在内联脚本中的 debugger 语句处无法停止开发者工具的回归问题。(1385374)
  • 新的控制台设置，可让您默认展开或收起 console.trace() 消息。通过设置切换设置 >偏好设置 >默认展开 console.trace() 消息。(1139616)
  • 与控制台类似，Sources 面板中的 Snippets 窗格也支持增强型自动补全功能。(772949) 自动补全代码段。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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