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

Jecelyn Yeen

录音机：以步骤选项复制、页内重放、步骤的上下文菜单

“记录器”面板中新增了复制选项。

在 Recorder 中打开现有用户流程。以前，当您重放用户流时，DevTools 始终会通过导航到或重新加载页面来开始重放。

经过最新更新后，录音机会单独显示导航步骤。您可以右键点击并将其移除，以执行页内重放！

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

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

Chromium 问题：1322313、1351649、1322313、1339767

在效果记录中显示实际的函数名称

Performance 面板现在会显示跟踪记录中的实际函数名称及其来源（如果有源映射的话）。

“性能”面板中会显示函数名称比较前后的对比。

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

显示缩减大小前后的文件。

以前，在 Performance 面板中记录轨迹时，轨迹只会显示缩减后的函数名称。这加大了调试的难度。

通过最新更改，开发者工具现在可以读取源代码映射，并显示实际的函数名称和源代码位置。

Chromium 问题：1364601、1364601

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

您可以使用以下命令在 Sources 面板中切换标签页： 在 MacOS 中，按 Function + Command + 向上箭头和向下箭头 在 Windows 和 Linux 上，按 Ctrl + Page up 或 down

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

除此之外，开发者工具现在还接受向右箭头，用于在行尾自动补全内容。例如，当您修改代码中间的内容时，系统就会显示一个自动补全对话框。按向右箭头键时，您很可能是希望将光标移至下一个位置，而不是自动补全。此用户体验变化更契合您的创作工作流程。

Chromium 问题：1167965、1172535、1371585。1369503

改进了 JavaScript 调试

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

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

Chromium 问题：1267690、1246863、1371322、1311637

其他亮点

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

  • 支持在 Styles 窗格中针对非活动 CSS 属性（内嵌高度和宽度、弹性和网格属性）提供更多提示。（1373597、1178508、1178508、1178508）
  • 修复了语法突出显示问题。自从开发者工具中最近升级了代码编辑器以来，此工具一直无法正常运行。(1290182)
  • 在 Recorder 中发生模糊处理事件后正确捕获输入更改事件。(1378488)
  • 更新了导出时的 Puppeteer 重放脚本，以在 Recorder 中提供更好的调试体验。(1351649)
  • 支持在录音机中录制和重放以进行远程调试。(1185727)
  • 修复了 var() 中特殊 CSS 变量名称的解析。之前，开发者工具不支持解析包含转义字符（如 var(--fo\ o)）的变量。、(1378992)

[实验性] 增强了管理断点时的用户体验

在监督所有断点方面，当前的 Breakpoints 窗格几乎没有视觉帮助。除此之外，常用操作隐藏在上下文菜单之后。

此次实验性用户体验重新设计将结构添加到 Breakpoints 窗格，让开发者能够快速访问常用功能，例如修改和移除断点。

下面介绍了一些亮点：

  • 两个暂停选项均位于 Breakpoints 窗格中。它们具有显式文本标签，使得选项变得一目了然。
  • 断点按文件分组，按行号或列号排序。您可以收起和展开它们。**
  • 添加了一些新选项，可让您将鼠标悬停在 Breakpoint 窗格中的断点或文件名上时移除和修改断点。

请阅读 RFC（已关闭）中的完整更改，并在此处提供反馈意见。

在重新设计前后显示“Breakpoint”窗格。

Chromium 问题：1346231、1324904

[实验性] 自动就地美观打印

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

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

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

Chromium 问题：1164184

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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