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

欢迎阅读第 1 期开发者工具版本说明!从现在开始,当您首次打开新版 Chrome 时,开发者工具会打开新变化抽屉,其中包含指向该版本的版本说明的链接。

亮点

  • “时间轴”面板已重命名为“效果”面板。
  • “配置文件”面板已重命名为“内存”面板。
  • Cookie 值现在可修改。
  • 现在,DevTools 会在内存不足错误发生之前自动暂停。

新功能

可修改的 Cookie

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

修改 Cookie。
图 1。修改 Cookie

感谢 kdzwinel 提供这项贡献!

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

现在,您可以在“样式”窗格中检查和修改 CSS 变量。请参阅 CSS 变量演示,亲自试用一下。

内存不足断点

现在,当应用在短时间内分配大量内存时,DevTools 会自动暂停并增加堆上限。这样,您就可以检查堆、在控制台中执行命令以释放内存,并继续调试问题。如需了解详情,请参阅 One Small Step For Chrome, One Giant Heap For V8

已在内存不足断点暂停
图 2。已在内存不足断点处暂停

创建画布时的断点

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

通过“事件监听器断点”窗格中的“创建画布上下文”复选框设置画布创建断点
图 3. 通过事件监听器断点窗格中的创建画布上下文复选框设置画布创建断点

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

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

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

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

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

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

感谢 sroussey 提供这项贡献!

变更

“时间轴”面板现已更名为“效果”面板

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

“配置文件”面板现已更名为“内存”面板

“配置文件”面板已重命名为“内存”面板,以更好地反映其用途。

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

现在,“配置文件”面板已更名为“内存”面板,因此在该面板上显示 CPU 性能分析器已没有意义。此外,我们的长期目标是从“效果”面板中获取所有用户的画像。与此同时,您仍然可以通过 Settings(设置)> More Tools(更多工具)> JavaScript Profiler(JavaScript 性能分析器)访问旧版 CPU 性能分析器。

如需了解如何在“性能”面板中分析 CPU,请参阅 Chrome DevTools:Chrome 58 中的 JavaScript CPU 性能分析

新版控制台界面

控制台面板和抽屉式菜单的界面发生了一些变化。我们已将一些不受欢迎的功能移至更隐蔽的位置,而常用功能现在更易于访问。

  • 点击控制台设置 控制台设置 即可访问用于自定义控制台行为的设置。
  • 保留日志现已隐藏在控制台设置中。
  • 过滤条件按钮和窗格已移除。请改用下拉菜单。
  • 用于过滤日志的文本框现在始终显示。此功能之前隐藏在“过滤条件”窗格中。
  • 过滤文本框会自动接受正则表达式,因此正则表达式复选框已移除。
  • 隐藏违规内容复选框已消失。将日志记录级别下拉菜单设置为详细,以查看违规情况。
  • 在旧版界面中取消选中显示所有消息复选框,相当于在新版界面中选中控制台设置中的仅显示所选情境复选框。
新版控制台界面
图 6。新版 Play 管理中心界面

WebGL 事件监听器断点已移动

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