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

Jecelyn Yeen

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

新增了“Recorder”面板中的复制选项。

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

在最新的更新中，录制器会单独显示导航步骤。您可以右键点击并将其移除，以执行页面内重放！

此外，您还可以右键点击某个步骤，将其复制到 *Recorder 面板中的剪贴板，而不是导出整个用户体验历程。它还适用于扩展程序。例如，尝试将步骤复制为 Nightwatch 测试脚本。借助此功能，您可以轻松更新任何现有脚本。

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

Chromium 问题：1322313、1351649、1322313、1339767

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

性能面板现在会在轨迹中显示实际函数名称及其来源（如果有源映射）。

显示“效果”面板中显示的函数名称的对比效果。

在此示例中，源文件在生产环境中会进行缩减。例如，在此演示中，sayHi 函数会缩减为 n，takeABreak 函数会缩减为 o。

显示缩减前后的文件。

以前，当您在性能面板中录制轨迹时，轨迹只会显示经过缩减的函数名称。这会增加调试难度。

在最新的更改生效后，DevTools 现在会读取源代码映射，并显示实际的函数名称和源代码位置。

Chromium 问题：1364601、1364601

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

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

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

此外，现在，只有在行末，DevTools 才接受使用向右键盘箭头进行自动补全。例如，当您在代码中间修改内容时，系统会显示自动补全对话框。当您按 Right Arrow 键时，很可能希望将光标设置为下一个位置，而不是自动补全。这项用户体验变更更符合您的创作工作流程。

Chromium 问题：1167965、1172535、1371585。1369503

改进了 JavaScript 调试

以下是此版本中的一些 JavaScript 调试改进：

  • new.target 是一个元属性，可让您检测是否使用 new 运算符调用了函数或构造函数。您现在可以在 Console 中记录 new.target，以便在调试期间检查其值。以前，当您输入 new.target 时，它会返回错误。显示 new.target 评估调试前后的对比。
  • 借助 WeakRef 对象，您可以保留对另一个对象的弱引用，而不会阻止对该对象进行垃圾回收。现在，开发者工具会显示该值的内嵌预览，并在调试期间直接在控制台中评估弱引用。以前，您必须对它们显式调用“deref”才能解析。显示调试期间 WeakRef 评估前后的对比。
  • 修复了阴影变量的内嵌预览。之前，显示值不正确。为阴影变量显示对比前后的内嵌预览。
  • 在 Sources 面板的 Scope 窗格中，对 Generator 和 async 函数中的变量名称进行脱壳处理。

Chromium 问题：1267690、1246863 1371322、1311637

其他亮点

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

  • 在 Styles 窗格中，针对未启用的 CSS 属性提供更多提示 - 内嵌高度和宽度、flex 和网格属性。（1373597、1178508、1178508、1178508）
  • 修复了语法突出显示问题。自 DevTools 近期升级代码编辑器后，该功能无法正常运行。(1290182)
  • 在 Recorder 中，在 on blur 事件之后正确捕获输入更改事件。(1378488)
  • 更新了导出时 Puppeteer 重放脚本，以便在录制器中获得更好的调试体验。(1351649)
  • 支持在录音机中进行录制和重放，以进行远程调试。(1185727)
  • 修复了 var() 中对特殊 CSS 变量名称的解析。以前，DevTools 不支持解析包含 var(--fo\ o) 等转义字符的变量。, (1378992)

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

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

这项实验性用户体验重新设计为 Breakpoints 窗格带来了结构，让开发者能够快速访问常用功能，例如修改和移除断点。

以下是一些亮点：

  • 这两个暂停选项均位于 Breakpoints 窗格中。它们带有明确的文本标签，让选项不言自明。
  • 断点按文件分组，并按行号或列号排序。您可以收起和展开这些窗口。**
  • 在断点窗格中，将鼠标悬停在断点或文件名称上时，会显示新的选项，用于移除和修改断点。

如需了解完整的更改，请参阅我们的 RFC（已关闭），并点击此处提供反馈。

重新设计前后的断点窗格。

Chromium 问题：1346231、1324904

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

Sources 面板现在会自动原地美化缩减过大小的源文件。您可以点击美化输出按钮 { } 来撤消此操作。

以前，来源面板默认显示缩减的内容。您必须手动点击“美化输出”按钮才能设置内容格式。此外，经过美化输出的内容并未显示在同一文件中，而是显示在另一个 ::formatted 标签页中。

显示自动原位美化输出前后的缩减过大小的文件。

Chromium 问题：1164184

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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