教你使用chrome開發者工具Network面板功能

2019-12-19 14:03:02

如果能多瞭解一些chrome開發者工具偵錯技巧/功能對於平時開發很與幫助，在實際專案中多使用這些功能，提升自己的工作效率。這裡教你使用chrome開發者工具Network面板功能，還不會的小夥伴趕緊看過來；

Capture screenshots是自動分析DOM樹的變化，截下DOM樹變化各個重要階段時的頁面。除了截圖外，還能看到每個截圖所對應的Network情況，通過橫向比較，可以發現一些請求（圖片、js、css、xhr等）對頁面的影響。

ctr+shift+i或者F12開啟開發者工具；

開啟Network面板，點亮左上角那個像是攝像機的圖示（滑鼠移上去會提示Capture screenshots）。

點亮該圖示後，會開啟新的一折疊面板，在該面板上會提示按Ctrl + R來啟動截圖。

按Ctrl + R後，截圖就自動完成了，如下圖所示：

雙擊某截圖就能看大圖；

點選選中某截圖，就能檢視該截圖時刻的Network情況。