Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

DevTools 更新点 (Chrome 58)

欢迎来到首期的 DevTools 发版日志!从这一版本开始,首次打开新版 Chrome 你会看到 DevTools 有一个 What's New 标签,里面含有当前版本发版日志的链接。

亮点

  • Timeline 面板更名为 Performance 面板。
  • Profiles 面板更名为 Memory 面板。
  • 可直接编辑 Cookie 值。
  • 在内存溢出前 DevTool 会自动暂停。

新功能

可编辑的 Cookie

双击 Cookies 标签里的表格项可直接编辑。

图 1. 编辑 Cookie

感谢 kdzwinel 的贡献!

CSS 变量可以在 Styles 面板中进行审查和编辑

现在,Styles 面板中可审查和编辑 CSS 变量了。查看此示例亲自体验一把吧。

内存溢出断点

当程序在短时间内分配占用了大量内存时,DevTools 会自动暂停并且加大堆栈的上限。 这样你就可以审查堆栈,在控制台执行命令来释放内存,然后继续进行调试。想了解更多, 请移步 Chrome的一小步,V8堆栈的一大步

图 2. 在内存溢出点的暂停

Canvas 被创建的断点

你可以创建一个基于 canvas 上下文被创建时所触发的事件断点

图 3. 从事件断点面板 canvas 上下文被创建复选框生成的断点

瀑布流时间线中新增开始时间

在瀑布流时间线顶部,可以看到一条请求是何时加入队列以及何时开始的。

图 4. 瀑布流时间线中新增开始时间

用时统计标签中的服务器信息

现在可以向网络面板的用时统计标签中插入自定义的服务器用时统计了。查看服务器用时统计示例

图 5. 用时统计标签中的服务器时间统计

变更

Timeline 面板变更为了现在的 Performance 面板

Timeline 面板更名为了 Performance 面板,以更好地反映它的功能。

Profiles 面板变成了现在的 Memory 面板

Profiles 面板更名为了 Memory 面板,以更好地反映它的功能。

CPU 分析器位置变更

既然 Profiles 面板已经更名为了 Memory 面板,再把 CPU 分析器放这里面就不合适了。此外,从长远来看后续 会把所有分析相关的放入性能面板。目前,你仍然可以通过 设置 > 更多工具 > JavaScript Profiler 来访问老版的 CPU 分析器。

查看 Chrome DevTools: 在 Chrome 58 中进行 JavaScript CPU 分析以了解如何在 Performance 面板中 分析 CPU。

全新的控制台界面

控制台及相关的标签进行了界面的更新。一些不太常用的功能进行了隐藏,露出了更加常用的功能。

  • 点击 控制台设置图标 控制台设置图标 来进行控制台相关的设置。
  • Preserve log 被挪到了 控制台的设置界面.
  • 去掉了 Filters 按钮及相应的面板。换成了现在的下拉菜单样式。
  • 过滤控制台信息的文本输入框从之前不可见的二级面板中挪了出来,始终显示。
  • 过滤控制台信息的文本输入自动接收正则作为输入,所以不需要之前的正则开关了。
  • 去掉了 Hide violations 复选框,取而代之的是日志等级下拉框中的 Verbose
  • 新版控制台中,勾选 控制台设置 中的 Selected context only 的效果和之前老界面里 去掉 Show all messages 的效果是一样的。
图 6. 全新的控制台界面

WebGL 事件监听器断点位置有所变更

WebGL 事件监听器断点 从原来的 WebGL 分类中移动到了 Canvas 分类中。 去掉了WebGL 这个分类。