如果能多瞭解一些chrome開發者工具調試技巧/功能對於平時開發很與幫助，在實際項目中多使用這些功能，提升自己的工作效率。這裡教你使用chrome開發者工具Network面板功能，還不會的小夥伴趕緊看過來；
工具/原料
chrome
Capture screenshots（捕捉網頁截圖）
Capture screenshots是自動分析DOM樹的變化，截下DOM樹變化各個重要階段時的頁面。除了截圖外，還能看到每個截圖所對應的Network情況，通過橫向比較，可以發現一些請求（圖片、js、css、xhr等）對頁面的影響。
ctr+shift+i或者F12打開開發者工具；
打開Network面板，點亮左上角那個像是攝像機的圖標（鼠標移上去會提示Capture screenshots）。
點亮該圖標後，會打開新的一折疊面板，在該面板上會提示按Ctrl + R來啟動截圖。
按Ctrl + R後，截圖就自動完成了，如下圖所示：
雙擊某截圖就能看大圖；
點擊選中某截圖，就能查看該截圖時刻的Network情況。
