DevTools 新功能（Chrome 110）

Published on 2023年2月13日星期一

Translated to: English, Português, Pусский, 日本語

Jecelyn Yeen

现为谷歌 Chrome DevTools 的开发技术推广工程师。

感谢 Yoong Sin Yi (Louis) 提供的翻译。

有兴趣帮忙改进 DevTools 吗？请注册并参与 Google 用户体验调研。

重载时清除性能面板

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

以前，性能面板会显示一个时间轴，其中包含以前录制的屏幕截图。这使得我们很难看到实际测量录制是什么时候开始的。现在面板总是先导航到 "about:blank "页面，以保证记录从一个空白跟踪开始。这与 性能洞察力 面板一致，后者已经做到了这一点。

Chromium 议题: 1101268, 1382044

记录器更新

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

记录器 现在提供拆分代码视图，让您更轻松地查看用户流代码。要访问代码视图，打开用户流并点击显示代码。

当把鼠标悬停在左边的每个步骤上时，记录器 突出显示相应的代码，使您很轻松跟踪您的流程。您可以使用下拉菜单改变代码格式，让您在 Nitghtwatch 脚本等格式之间切换。

Chromium 议题: 1385489

自定义录音的选择器类型

您可以创建只捕获对您重要的选择器类型的记录。通过在创建新记录时自定义选择器类型的新选项，您可以包括或排除选择器 XPath，确保您只捕获用户流中所需的选择器。

Chromium 议题: 1384431

录制时编辑用户流程

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

Chromium 议题: 1381971

自动的代码美化器

在资源面板会自动在原地代码美化已减化的源文件。你可以点击 代码美化器 按钮{ }来撤销它。

在以前，源代码 面板默认显示缩小的内容。要格式化内容，您必须手动单击代码美化器的打印按钮。最重要的是，代码美化器内容没有显示在同一个选项卡中，而是显示在另一个 ::formatted 选项卡中。

Chromium 议题: 1383453, 1382752, 1382397

为 Vue、SCSS 等提供更好的语法高亮和内联预览

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

此外，DevTools 还改进了 Vue、内联 HTML 和 TSX 的内联预览。将鼠标悬停在一个变量上可以预览它的值。

除此之外，DevTools 现在在 源代码 面板中显示样式表的源码图。例如，当你打开一个 SCSS 文件时，你可以通过点击源图链接来访问相关的 CSS 文件。

Chromium 议题: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

控制台中符合人体工程学且一致的自动完成功能

DevTools 通过实施以下更改增强了自动完成体验：

Tab总是用于自动完成。

右箭头 和 回车 的行为因环境而异。

在 控制台、源代码 和元素面板中，自动完成的体验在各文本编辑器中是一致的。

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

控制台 显示一个自动完成的建议列表，顶部选项周围有一个微妙的点状边框，表明导航尚未开始。

当您按 回车 时，控制台 会执行该行。以前，它会自动完成带有最高建议的行。要自动完成，请按 Tab 或 右箭头。

当您使用向上箭头 和 向下箭头 快捷方式浏览建议列表时，控制台 会突出显示所选选项。

要在导航期间自动完成所选选项，请使用键盘键Tab、回车 或 右箭头

在代码中间编辑时，例如，当光标在 n 和 s 之间时，使用 Tab 进行自动补全，使用 回车 执行该行，使用 右箭头 向前移动光标。

Chromium 议题: 1399436, 1276960

其他的更新

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

DevTools 中的一个回归问题，即它无法在内联脚本中的 debugger 语句处停止，已经得到解决。(1385374)

新的 控制台 设置，允许你默认展开或折叠console.trace()信息。通过设置 > 首选项 > **默认展开console.trace()信息来切换设置。(1139616)

源代码 面板中的 Snippets 边栏支持增强的自动完成功能，类似于 控制台。 (772949)

下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版（Dev）或测试版（Beta）设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ，让您抢先在用户之前发现您网站上的问题！

联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进，或一切关于 DevTools 的一切。

提交建议或意见回馈：crbug.com.
报告 DevTools 问题：打开 DevTools，按 更多选项图标 > 帮助 > 报告 DevTools 问题。
在推特上，发推文： @ChromeDevTools.
在我们的 What's new in DevTools YouTube 视频底下留言。

DevTools 新功能（Chrome 110）

重载时清除性能面板