开发者工具中的新功能 (Chrome 109)

Jecelyn Yeen

记录器：复制为步骤的选项、网页内重放、步骤的上下文菜单

在记录器中打开现有用户体验流程。以前，当您重放用户流时，DevTools 始终会通过前往或重新加载网页来开始重放。

在最新更新中，记录器会单独显示导航步骤。您可以右键点击并移除该扩展程序，以便在网页中进行重放！

除此之外，您还可以右键点击某个步骤，将其复制到剪贴板，而不是导出整个用户流。它还可与扩展程序搭配使用。例如，尝试将某个步骤复制为 Nightwatch Test 脚本。借助此功能，您可以轻松更新任何现有脚本。

以前，您只能通过三点状按钮访问步骤菜单。现在，您可以右键点击步骤中的任意位置来访问菜单。

Chromium 问题：1322313、1351649、1322313、1339767

在性能记录中显示实际的函数名称

如果存在源映射，“性能”面板现在会在轨迹中显示实际的函数名称及其来源。

在此示例中，源文件在生产期间被缩小。例如，在此演示中，sayHi 函数被缩减为 n，而 takeABreak 函数被缩减为 o。

以前，在性能面板中记录轨迹时，轨迹只会显示精简的函数名称。这会加大调试难度。

通过最新更改，DevTools 现在可以读取源映射并显示实际的函数名称和来源位置。

Chromium 问题：1364601、1364601

控制台和“来源”面板中的新键盘快捷键

您可以使用以下快捷键在来源面板中的标签页之间切换： 在 MacOS 上，按 Function + Command + 向上键和向下键 在 Windows 和 Linux 上，按 Control + Page up 或 down

此外，您还可以在 macOS 上使用 Ctrl + N 和 Ctrl + P 浏览自动补全建议，这与 Emacs 类似。例如，您可以在 Console 中输入 window.，然后使用这些快捷键进行导航。

此外，开发者工具现在仅在行尾接受向右键进行自动补全。例如，当您在代码中间编辑内容时，系统会显示自动补全对话框。当您按向右键时，您很可能希望将光标设置到下一个位置，而不是自动补全。此界面变更可更好地与您的创作工作流程保持一致。

Chromium 问题：1167965、1172535、1371585。1369503

改进了 JavaScript 调试

此版本在 JavaScript 调试方面进行了一些改进：

• new.target 是一种元属性，可用于检测函数或构造函数是否是通过 new 运算符调用的。您现在可以在控制台中记录 new.target，以便在调试期间检查其值。以前，当您输入 new.target 时，它会返回错误。
• 借助 WeakRef 对象，您可以持有对另一个对象的弱引用，而不会阻止该对象被垃圾回收。开发者工具现在会显示值的内嵌预览，并在调试期间直接在控制台中评估弱引用。以前，您必须明确调用“deref”才能解析它。
• 修复了带阴影变量的内嵌预览。之前，显示值不正确。
• 在来源面板的范围窗格中，对 Generator 和 async 函数中的变量名称进行反混淆处理。

Chromium 问题：1267690、1246863、1371322、1311637

其他亮点

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

• 在样式窗格中为不活跃的 CSS 属性提供更多提示 - 内嵌高度和宽度、flex 和网格属性。（1373597、1178508、1178508、1178508）
• 修复了语法突出显示问题。由于开发者工具中最近的代码编辑器升级，此功能无法正常运行。(1290182)
• 在 Recorder 中，在 on blur 事件之后正确捕获输入更改事件。(1378488)
• 更新了导出时的 Puppeteer 重放脚本，以便在记录器中获得更好的调试体验。(1351649)
• 支持在记录器中记录和重放，以便进行远程调试。(1185727)
• 修复了 var() 中特殊 CSS 变量名称的解析问题。之前，开发者工具不支持解析包含转义字符（例如 var(--fo\ o)）的变量。，(1378992)

[实验性] 改进了管理断点的用户体验

当前的断点窗格在监督所有断点方面提供的视觉辅助功能很少。此外，常用操作隐藏在上下文菜单中。

这项实验性用户体验重新设计为断点窗格带来了结构，并允许开发者快速访问常用功能，例如编辑和移除断点。

以下是一些亮点：

• 这两种暂停选项都位于断点窗格中。它们具有明确的文字标签，可让选项一目了然。
• 断点按文件分组，并按行号或列号排序。您可以折叠和展开这些窗口。**
• 在断点窗格中，当鼠标悬停在断点或文件名上时，系统会显示用于移除和修改断点的新选项。

如需查看完整的更改内容，请参阅我们的 RFC（已关闭），并点击此处留下您的反馈。

Chromium 问题：1346231、1324904

[实验性] 自动就地美观输出

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

以前，来源面板默认显示的是精简版内容。您必须手动点击美化打印按钮才能格式化内容。不仅如此，美观打印的内容并未显示在同一文件中，而是显示在另一个 ::formatted 标签页中。

Chromium 问题：1164184

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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