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

重新加载时清除性能面板

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

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

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

Chromium 问题:11012681382044

录音机更新

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

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

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

录音机中的代码视图。

Chromium 问题:1385489

自定义录音的选择器类型

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

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

Chromium 问题:1384431

在录制过程中修改用户流

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

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

Chromium 问题:1381971

自动就地打印

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

以前,Sources 面板默认显示缩减的内容。要设置内容的格式,您必须手动点击“优质打印”按钮。最重要的是,格式美观的内容不是显示在同一个标签页中,而是显示在另一个 ::formatted 标签页中。

在自动就地打印之前和之后显示缩减过大小的文件。

Chromium 问题:138345313827521382397

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

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

Vue 中的语法突出显示功能。

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

Vue 的内嵌预览。

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

SASS 的来源映射链接。

Chromium 问题:138537413856321385281138526913838921361862138345113920、

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

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

  • Tab 始终用于自动补全。
  • Arrow rightEnter 的行为因上下文而异。
  • ConsoleSourcesElements 面板中,不同文本编辑器提供一致的自动补全体验

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

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

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

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

  • 如需在导航期间使用所选选项自动补全,请使用键盘键 TabEnterArrow Right在导航过程中使用所选选项自动补全内容。

  • 在代码中间进行修改时(例如,当光标位于 ns 之间时),使用 Tab 自动补全内容,使用 Enter 执行代码行,使用 Arrow Right 将光标向前移动。 在代码中修改。

Chromium 问题:13994361276960

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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