DevTools Network 面板精通
Chrome DevTools 的 Network 面板是前端開發者最重要的工具之一。本篇將帶你精通它的每個功能。
一、 面板概覽
1.1 開啟方式
F12或Cmd+Option+I(Mac) /Ctrl+Shift+I(Windows)- 右鍵 → 檢查 → Network 標籤
1.2 介面區域
┌─────────────────────────────────────────────────┐
│ [過濾器] [搜尋] [保留日誌] [停用快取] [節流] │
├─────────────────────────────────────────────────┤
│ Name │ Status │ Type │ Size │ Time │ Waterfall │
├─────────────────────────────────────────────────┤
│ index.html │ 200 │ doc │ 5KB │ 50ms │ ████ │
│ app.js │ 200 │ js │ 100KB│ 200ms│ ████████ │
│ style.css │ 200 │ css │ 20KB │ 80ms │ █████ │
├─────────────────────────────────────────────────┤
│ 10 requests │ 500KB transferred │ 2.5s Load │
└─────────────────────────────────────────────────┘二、 請求過濾
2.1 類型過濾
| 過濾器 | 說明 |
|---|---|
| All | 所有請求 |
| Fetch/XHR | API 請求 |
| JS | JavaScript |
| CSS | 樣式表 |
| Img | 圖片 |
| Media | 影音 |
| Font | 字型 |
| Doc | HTML |
| WS | WebSocket |
| Wasm | WebAssembly |
2.2 文字過濾
bash
# 網域過濾
domain:api.example.com
# 狀態碼過濾
status-code:404
status-code:500
# 方法過濾
method:POST
# 類型過濾
mime-type:application/json
# 大小過濾
larger-than:100K
smaller-than:1M
# 組合過濾
domain:api.example.com method:POST status-code:200
# 反向過濾
-domain:google.com三、 請求詳情
3.1 Headers 標籤
General:
Request URL: https://api.example.com/users
Request Method: GET
Status Code: 200 OK
Remote Address: 104.26.10.64:443
Response Headers:
content-type: application/json
cache-control: max-age=3600
...
Request Headers:
authorization: Bearer eyJ...
accept: application/json
...3.2 Payload 標籤
顯示 POST/PUT 請求的 Body：
json
{
"name": "John",
"email": "john@example.com"
}3.3 Preview/Response 標籤
- Preview：格式化的回應（JSON 自動解析）
- Response：原始回應文字
3.4 Timing 標籤
Queuing : 2.5ms 等待排隊
Stalled : 5.0ms 連線建立前的阻塞
DNS Lookup : 10ms DNS 解析
Initial Conn : 50ms TCP 連線
SSL : 30ms TLS 握手
Request Sent : 0.5ms 發送請求
Waiting(TTFB): 150ms 等待第一個位元組
Content Down : 80ms 下載內容
─────────────────────────
Total : 328ms四、 Waterfall 分析
4.1 顏色含義
| 顏色 | 階段 |
|---|---|
| 白色 | Queueing（排隊） |
| 灰色 | Stalled（阻塞） |
| 綠色 | DNS Lookup |
| 橘色 | Initial Connection |
| 紫色 | SSL |
| 深綠色 | Request Sent |
| 淺綠色 | Waiting (TTFB) |
| 藍色 | Content Download |
4.2 常見問題診斷
五、 效能分析
5.1 關鍵指標
DOMContentLoaded: 1.5s DOM 完成解析
Load: 3.2s 所有資源載入
Finish: 5.8s 包括延遲載入5.2 阻塞資源
觀察 Waterfall，找出阻塞渲染的資源：
CSS 阻塞渲染
<link rel="stylesheet" href="style.css">
JS 阻塞解析
<script src="app.js"></script>
解決方案：
<link rel="preload" as="style" href="style.css">
<script defer src="app.js"></script>5.3 資源優先級
右鍵表頭 → 顯示 Priority：
| 優先級 | 資源類型 |
|---|---|
| Highest | HTML、CSS |
| High | Font、預載入資源 |
| Medium | 同步 JS |
| Low | 圖片、非同步 JS |
| Lowest | Prefetch |
六、 進階功能
6.1 保留日誌
勾選「Preserve log」，跨頁面保留網路記錄。
6.2 停用快取
勾選「Disable cache」（DevTools 開啟時生效）。
6.3 網路節流
模擬慢速網路：
| 預設 | 下載 | 上傳 | 延遲 |
|---|---|---|---|
| Fast 3G | 1.5 Mbps | 750 Kbps | 562.5ms |
| Slow 3G | 780 Kbps | 330 Kbps | 2000ms |
| Offline | 0 | 0 | - |
6.4 請求阻擋
右鍵請求 → Block request URL
右鍵請求 → Block request domain6.5 覆蓋回應
1. 右鍵請求 → Override headers
2. 設定本地覆蓋資料夾
3. 修改回應內容七、 實用技巧
7.1 複製請求
bash
# 右鍵 → Copy → Copy as cURL
curl 'https://api.example.com/users' \
-H 'Authorization: Bearer token' \
--compressed
# 右鍵 → Copy → Copy as fetch
fetch("https://api.example.com/users", {
headers: { "Authorization": "Bearer token" }
})7.2 重播請求
右鍵 → Replay XHR7.3 查看 WebSocket
- 點擊 WS 請求
- 切換到 Messages 標籤
- 查看雙向訊息
7.4 匯出 HAR
右鍵 → Save all as HAR with contentHAR（HTTP Archive）可用於：
- 分享除錯資訊
- 效能分析
- 自動化測試
八、 效能優化建議
8.1 減少請求數
bash
# 觀察 Network 面板
- 合併 CSS/JS
- 使用 CSS Sprites
- 圖片使用 Base64（小圖）8.2 減少傳輸大小
bash
# 檢查 Size 欄位
- 啟用 Gzip/Brotli
- 壓縮圖片
- Tree Shaking8.3 優化載入順序
bash
# 分析 Waterfall
- preload 關鍵資源
- defer/async 非關鍵 JS
- lazy load 圖片總結
| 功能 | 用途 |
|---|---|
| Timing | 分析延遲來源 |
| Waterfall | 視覺化載入順序 |
| 過濾器 | 快速找到目標 |
| 節流 | 模擬慢網路 |
| 阻擋 | 測試降級 |
| HAR | 記錄和分享 |
> **除錯心法**：先看狀態碼，再看 Timing，最後看 Headers。
進階挑戰
- 分析一個網站的 Waterfall，找出效能瓶頸。
- 使用 HAR 檔案建立自動化效能測試。
- 研究 Performance 面板，與 Network 面板結合分析。