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

欢迎阅读开发者工具版本说明的第一期!从现在起,在您首次打开 Chrome 的新版本时,开发者工具会打开 What's New 抽屉式导航栏,其中包含指向该版本版本说明的链接。

亮点

  • “时间轴”面板已更名为“性能”面板。
  • “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 性能分析器真的毫无意义。此外,长期目标是让所有用户通过“性能”面板进行性能分析。在此期间,您仍然可以通过依次选择 Settings > More Tools > JavaScript Profiler 来访问旧版 CPU 性能分析器。

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

新的管理中心界面

Console 面板和抽屉式导航栏的界面发生了一些变化。一些不受欢迎的功能已移至更多隐藏位置,并且现在可以更轻松地访问热门功能。

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

WebGL 事件监听器断点已移动

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