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

Jecelyn Yeen

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

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

在 Recorder 中打开现有用户流。以前，当您重放用户流时，开发者工具总是通过导航到或重新加载页面来开始重放。

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

除此之外，您可以右键点击某个步骤，然后在 *Recorder 面板中将其复制到剪贴板，而无需导出整个用户流。同时也可与扩展程序搭配使用。例如，尝试以 Nightwatch Test 脚本的形式复制某个步骤。借助此功能，您可以轻松更新任何现有的脚本。

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

Chromium 问题：1322313、1351649、1322313、1339767

在表演录制内容中显示实际函数名称

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

在“性能”面板中显示函数名称之前和之后的对比结果。

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

显示缩减前后的文件。

以前，当您在 Performance 面板中录制轨迹时，轨迹仅显示缩小的函数名称。这增加了调试的难度。

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

Chromium 问题：1364601、1364601

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

您可以使用以下方法在“Sources”面板中的标签页之间切换：在 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.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)
  • 支持在 Recorder 中录制和重放以进行远程调试。(1185727)
  • 修复了 var() 中特殊 CSS 变量名称的解析问题。以前，开发者工具不支持解析含有 var(--fo\ o) 等转义字符的变量。、(1378992)

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

对于监管所有断点，当前的 Breakpoints 窗格提供很少的视觉辅助。除此之外，常用操作都隐藏在上下文菜单之后。

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

以下是一些亮点：

  • 两个暂停选项均位于 Breakpoints 窗格中。它们具有明确的文本标签，选项不言而喻。
  • 断点按文件分组，并按行号或列号排序。您可以收起和展开这些标签页。**
  • 添加了新选项，用于在将鼠标指针悬停在 Breakpoint 窗格中的断点或文件名上时移除和修改断点。

请阅读我们的 RFC（封闭式）中的所有变更，并在此处提供您的反馈。

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

Chromium 问题：1346231、1324904

[实验性] 自动就地打印

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

以前，来源面板默认显示缩减后的内容。您必须手动点击美观的打印按钮来设置内容格式。除此之外，美观输出的内容并不在同一个文件中，而是显示在另一个 ::formatted 标签页中。

在自动就地美观打印前后显示缩小的文件。

Chromium 问题：1164184

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文：@ChromeDevTools。
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59