我不知道的 Chrome Network 面板技巧

頁面加載及渲染過程快照

點擊網絡面板左上角的第三個攝像機圖標按鈕，進入錄製模式，刷新後就能夠錄製頁面加載渲染過程了（網絡加載過快也能夠在 No throttling 那裏選擇限制網絡爲 3G）

錄製完成結果如上圖，每一個快照上面有對應的時間，鼠標移動到每個快照上時，相應的時間點也在下面的 Timeline 裏顯示。
雙擊便可打開查看快照時頁面的渲染情況，按右方向鍵能夠切換到下一張

咱們能夠利用此功能清楚的知道咱們的頁面上每部分的渲染順序，優化首屏加載等。
<!--more-->

查看請求發起源等信息

• Initator 列顯示哪一個文件及位置加載的這個請求

• 列頭能夠點擊排序，也能夠右鍵添加更多列，如 Protocol

過濾請求

• 按住 Ctrl or Command (Mac) 能夠點擊選擇多個過濾條件，見上面的圖

• 過濾輸入框支持支持條件查詢：如 domain:*.juancdn.com larger-than:10k, 更多參考：filter-requests

XHR 重放

在 ajax 請求上右鍵，選擇 Replay XHR，能夠將從新再發一遍，這在前端調試接口時比較好用。

相關參考

• https://developers.google.com...

• Chrome 控制檯不徹底指南

原文地址：https://uedsky.com/2016-09/chrome-network/
獲取最佳閱讀體驗並參與討論，請訪問原文