教你使用chrome开发者工具Network面板功能

1、Capture screenshots是自动分析DOM树的变化，截下DOM树变化各个重要阶段时的页面。除了截图外，还能看到每个截图所对应的Network情况，通过横向比较，可以发现一些请求（图片、js、css、xhr等）对页面的影响。

ctr+shift+i或者F12打开开发者工具；

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

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

3、按Ctrl + R后，截图就自动完成了，如下图所示：

双击某截图就能看大图；

4、点击选中某截图，就能查看该截图时刻的Network情况。