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

Jecelyn Yeen

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

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

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

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

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

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

Chromium 问题：1322313、1351649、1322313、1339767

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

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

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

在此示例中，源文件在生产期间会被缩减。例如，在此演示中，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 视频发表评论。

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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