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

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

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

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

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

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

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

Chromium 问题:1322313135164913223131339767

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

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

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

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

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

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

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

Chromium 问题:13646011364601

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

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

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

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

Chromium 问题:1167965117253513715851369503

改进了 JavaScript 调试

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

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

Chromium 问题:1267690124686313713221311637

其他亮点

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

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

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

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

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

下面介绍了一些亮点:

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

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

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

Chromium 问题:13462311324904

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

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

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

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

Chromium 问题:1164184

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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