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

凯斯·巴斯克 (Kayce Basques)
Kayce Basques

欢迎阅读开发者工具版本说明的第一期内容!此后,当您首次打开新版 Chrome 时,开发者工具会打开新变化抽屉式导航栏,其中包含指向该版本版本说明的链接。

亮点

  • “时间轴”面板已重命名为“性能”面板。
  • “Profiles”面板已重命名为“Memory”面板。
  • 现在可以修改 Cookie 值。
  • 现在,开发者工具会在内存不足错误之前自动暂停。

新功能

可修改的 Cookie

双击 Cookie 标签页中的单元格来修改该值。

修改 Cookie。
图 1. 修改 Cookie

感谢 kdzwinel 的贡献!

“Styles”窗格中的可检查和可修改的 CSS 变量

现在,您可以在“Styles”窗格中检查和修改 CSS 变量。您可以参阅 CSS 变量演示来亲自尝试。

内存不足的断点

现在,当应用在短时间内分配大量内存时,开发者工具会自动暂停并提高堆限制。这样,您就可以检查堆、在控制台中执行命令以释放内存,并继续调试问题。如需了解详情,请参阅 Chrome 的一小步,V8 的一大堆

已在内存不足的断点上暂停
图 2. 在内存不足的断点上暂停

创建画布时的断点

您现在可以创建事件监听器断点,这些断点会在创建新的画布上下文时触发。

通过“Event Listener Breakpoints”窗格中的“Create canvas context”复选框,实现画布创建断点
图 3. 通过 Event Listener Breakpoints 窗格中的 Create canvas context 复选框创建画布创建断点

“计时”标签页中的开始时间统计信息

在“时间”标签页顶部,您现在可以看到请求加入队列和开始的时间。

“计时”标签页中的开始时间统计信息。
图 4. “计时”标签页中的开始时间统计信息

“计时”标签页中的服务器统计信息

现在,您可以将自定义服务器统计信息插入“计时”标签中。如需查看示例,请参阅服务器计时值演示

“计时”标签页中的服务器统计信息
图 5. 计时标签页中的服务器统计信息

感谢 sroussey 的贡献!

变更

“时间轴”面板现在是“性能”面板

时间轴面板已重命名为“性能”面板,以更好地反映其用途。

“Profiles”面板现为“Memory”面板

“Profiles”面板已重命名为“Memory”面板,以更好地反映其用途。

CPU 性能分析器位于一个隐藏的面板后面

现在,“Profiles”面板称为“Memory”面板,在该面板上再添加 CPU 性能分析器已经没有意义了。此外,长期目标是从“性能”面板获取所有用户分析。在此期间,您仍然可以通过依次点击设置 > 更多工具 > JavaScript 性能分析器来访问旧版 CPU 性能分析器。

请参阅 Chrome 开发者工具:Chrome 58 中的 JavaScript CPU 性能分析,了解如何在“性能”面板中分析 CPU。

新的控制台界面

控制台面板和抽屉式导航栏在界面上发生了一些变化。一些非热门功能已移至更多隐藏的位置,热门功能现在更便于访问。

  • 点击控制台设置 控制台设置,访问用于自定义控制台行为的设置。
  • 保留日志现在在控制台设置中处于隐藏状态。
  • Filters 按钮和窗格消失。请改用下拉菜单。
  • 现在,过滤日志的文本框始终显示。之前,它在“过滤条件”窗格中隐藏。
  • 过滤文本框会自动接受正则表达式,因此 Regex 复选框会消失。
  • 隐藏违规问题复选框将不再显示。将日志记录级别下拉菜单设置为 Verbose,以查看违规行为。
  • 在旧版界面中取消选中显示所有消息复选框相当于在新界面的控制台设置中勾选仅显示所选上下文复选框。
新版 Play 管理中心界面
图 6. 新版 Play 管理中心界面

WebGL 事件监听器断点已移动

WebGL 事件监听器断点已从 WebGL 类别移至 Canvas 类别。WebGL 类别已被移除。