chrome开发者工具功能拾遗：Network面板篇

本文主要介绍一些本人在此以前不甚了解，但通过了解后又发现对本身的工做颇有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下本身，在实际项目中多使用这些功能，尽快熟悉起来，提高本身的工做效率。

---

Capture screenshots（捕捉网页截图）

Capture screenshots是自动分析DOM树的变化，截下DOM树变化各个重要阶段时的页面，尚不清楚是如何判断截图时机的（不过确定是在DOM树有变化的时候才截图的）。除了截图外，还能看到每一个截图所对应的Network状况，经过横向比较，能够发现一些请求（图片、js、css、xhr等）对页面的影响，举例来讲：在加载某js前，页面上是没有菜单的，加载后菜单就出来了，那就能够粗略地判断此js与菜单有关。
另外，这功能对于解决页面抖动（最多见于MVVM框架的DOM树渲染，以及因为图片未加载致使该区域尺寸未定的状况）也有很大的帮助。
此功能应该比较新，在网上看chrome开发者工具相关文章时，发现他们的版本根本就没有这个功能（从开发者工具界面截图得知），也不知道他们用的是什么版本，反正个人chrome 46是有这功能的。
使用这功能的方法以下：

1. 打开Network面板，点亮左上角那个像是摄像机的图标（鼠标移上去会提示Capture screenshots）。

1. 点亮该图标后，会打开新的一折叠面板，在该面板上会提示按Ctrl + R来启动截图。

1. 按Ctrl + R后，截图就自动完成了，以下图所示：

1. 双击某截图就能看大图。

1. 点击选中某截图，就能查看该截图时刻的Network状况。