如果能多了解一些chrome开发者工具调试技巧/功能对于平时开发很与帮助，在实际项目中多使用这些功能，提升自己的工作效率。这里教你使用chrome开发者工具Network面板功能，还不会的小伙伴赶紧看过来；
工具/原料
chrome
Capture screenshots（捕捉网页截图）
1
Capture screenshots是自动分析DOM树的变化，截下DOM树变化各个重要阶段时的页面。除了截图外，还能看到每个截图所对应的Network情况，通过横向比较，可以发现一些请求（图片、js、css、xhr等）对页面的影响。ctr+shift+i或者F12打开开发者工具；打开Network面板，点亮左上角那个像是摄像机的图标（鼠标移上去会提示Capture screenshots）。
2
点亮该图标后，会打开新的一折叠面板，在该面板上会提示按Ctrl + R来启动截图。
3
按Ctrl + R后，截图就自动完成了，如下图所示：双击某截图就能看大图；
4
点击选中某截图，就能查看该截图时刻的Network情况。
注意事项
如果有任何疑问欢迎写评论有得，如果本经验帮到了你，欢迎投票点赞