---
tags: chrome devtools
---
# chrome devtools - Network(Reference)

## 紀錄網路請求(Record network requests)
預設下，只要打開 DevTools，DevTools 就會在 Network 中記錄所有網絡請求(network requests)。


### 停止紀錄網路請求(Stop recording network requests)
可以用以下 2 種方式來**停止紀錄 requests**：

1. 點擊左上方 🔴 圓形紅色按鈕，按鈕會從紅色變為灰色，表示 DevTools 不會再紀錄 requests。
2. 滑鼠 focus 在 Network 面板上，
- Mac: Command+E
- Windows/Linux: Control+E

### Clear requests
按左上方 🚫 清除鍵，將移除所有被記錄在表格上的 requests。


<br>

### 頁面重載時保留請求紀錄(Save requests across page loads)
若==勾選 Preserve log==，則在頁面重新整理時，會保留先前所有 requests 紀錄。反之則不會保留。


### Capture screenshots during page load
可以捕捉「使用者在等待頁面載完過程中所看到的頁面」
1. 點擊**攝影機圖形(如下圖一，找不到的話用下圖二方式)**，攝影機開啟時會呈現藍色
2. 重新整理頁面


<br>

- **hover 縮圖**：查看每個截圖的發生時間

- **click 縮圖**：過濾掉那個 moment 之後發生的 requests，也就是指顯示該 moment 下已經發生的 requests。


- **Double-click 縮圖**：放大檢視


<br>

### 重新發送非同步請求(Replay XHR request)
在 network 面板中，選取 request 表中 XHR 紀錄，按右鍵執行 ==Replay XHR==，可以重新發送該項非同步請求。

<br>

## 改變加載行為(Change loading behavior)
由於**重複訪問會從瀏覽器緩存(cache)中提供請求**，若要模擬使用者首次訪問網站，**勾選 ==Disable cache==**，DevTools 將**禁用瀏覽器緩存**。


<br>

### 手動清除瀏覽器緩存(Manually clear the browser cache)
在請求記錄表上按**右鍵 → Clear Broeser Cache**
可以手動清除瀏覽器緩存(cache)。

<br>

### 手動清除瀏覽器 cookies(Manually clear browser cookies)
在 requests table 點擊右鍵，選擇 ==Clear Broeser Cookies==。


<br>

### 模擬離線(Emulate offline)
選取 ==Offline==，可以模擬離線狀態。


<br>

### 模擬慢網速(Emulate slow network connections)

可模擬 2G、3G，或是點擊 **add**.. 自定義網速。


啟用網速限制或模擬離線時，Network 旁會出現提示 icon，代表已經啟動。


<br>

## 過濾請求(Filter requests)

可以以 properties 來過濾請求，例如 donain、size、status code... 等。

以下是所有支援 properties 的[清單](https://developers.google.com/web/tools/chrome-devtools/network/reference?utm_source=devtools#filter-by-property)，可以同時以多個條件過濾，以==空格==隔開條件即可，例如 `mime-type:image/gif larger-than:1K` 會顯示所有符合大於 1K 的 gif 類型檔案>


### 依類型過濾請求(Filter requests by type)
點擊上排 XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Manifest, Other 按鈕可依照類型過濾請求。

在 Mac 按住 Command，可以進行多選。
在 Windows 和 Linux 按住 Control，可以進行多選。


### 依時間過濾請求 (Filter requests by time)

### 隱藏 data URLs (Hide data URLs)
data URLs 是嵌入在其他文件中的小檔案。在請求表中看到的以 ==data:== 開頭的任何請求都是 data URL。


<br>

## 對 requests 排序 (Sort requests)
預設下，requests 紀錄表上的順序會根據 requests 的啟動時間。可以使用其他條件來排序紀錄表上的 requests。

### 1. Sort by column
點擊每一欄(column) 表頭，會以該欄為中心，將 requests 進行排序(該欄由大到小、小到大、a 到 z、z 到 a 排序)


### 2. Sort by activity phase
可以依照以下 5 種活動階段對 **Waterfall** 欄排序
在表頭按右鍵 → Waterfall → 5 選 1:

- **Start Time:** 開始時間(預設)
- **Response Time:** 開始下載的時間
- **End Time:** 結束時間
- **Total Duration:** 開始到結束時間
- **Latency:** 開始到開始下載時間

預設下皆由最短時間排到最大時間，可以點擊 Waterfall 表頭反向排序。

圖片來源：[it 邦幫忙](https://ithelp.ithome.com.tw/articles/10247206)

<br>

## 分析請求 (Analyze requests)

### View a log of requests

預設下，請求紀錄表格有 7 個欄位:
- **Name**: 資源的文件名或識別符
- **Status**: HTTP 狀態碼
- **Type**: 請求資源的 MIME 類型
- **Initiator**: 發起請求者，以下物件或過程可能會發起請求:
- **Parser:** Chrome 的 HTML 解析器.
- **Redirect:** HTTP 重新導向.
- **Script:** 一個 JavaScript 的 function.
- **Other:** 其他像是通過 link 或是在網址欄輸入網址的方式到達頁面
- **Size**: 伺服器回傳的 response hearders 和 response body 總大小
- **Time**. 從請求開始到 response 中最後一個字節接收的總時間。
- **Waterfall**: 個別請求活動的細節視覺化。


#### 新增/移除欄位 (Add or remove columns)
在請求紀錄表的表頭按右鍵，選擇要隱藏或顯示的項目。已顯示於表格上的選項旁邊會有 ✔️ 符號。


#### 新增自定義欄位 (Add custom columns)
在請求紀錄表的表頭按右鍵，選擇 **Response Headers** **> Manage Header Columns**

### 分析 WebSocket connection 的 frames (Analyze the frames of a WebSocket Connection)
[WebSocket - MDN](https://developer.mozilla.org/zh-TW/docs/WebSockets/Writing_WebSocket_client_applications):
> WebSocket 是一種讓瀏覽器與伺服器進行一段互動通訊的技術。使用這項技術的 Webapp 可以直接進行即時通訊而不需要不斷對資料更改進行輪詢（polling）
1. 點擊 WebSocket connection
2. 點擊 framse(Message) 的 tab，將顯示最近 100 筆 frames。

補充：websoket 模擬網址: https://kaazing.com/inspecting-websocket-traffic-with-chrome-developer-tools/


實際操作如下


Frames(Message) 表格包含三個欄位：

- **Data**: message payload
- 若 message 是純文字，將會直接顯示
- 若 message 是二進制操作代碼(binary opcodes)，會顯示操作代碼名字和程式碼
支持以下操作碼：Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame, and Pong Frame
- **Length**: message payload 長度，以 bytes 為單位。
- **Time**: 接收或發送 message 的時間

根據不同的 message 類型進行，會有不同的顏色編碼：
- **送出** message 為**淺綠色**
- **收到** message 為**白色**
- webSocket 操作碼(opcodes)為**淺黃色**
- 錯誤為**淺紅色**

### 查看 response body 的預覽 (View a preview of a response body)

1. 點擊 Name 欄位下的 requset
2. 點擊 **Preview** 的 tab

Preview 會自動依據檔案類型決定顯示的方式：

**JSON** – JavaScript 物件
**圖片** - 顯示圖片
**HTML** - Render 為頁面
**字體** - 顯示所有文字


### 查看 response body (View a response body)

1. 點擊 Name 欄位下的 requset
2. 點擊 **Response** 的 tab


### 查看 HTTP headers (View HTTP headers)

1. 點擊 Name 欄位下的 requset
2. 點擊 **Headers** 的 tab


#### View HTTP header source
:::danger
沒有找到
1. 點擊 Name 欄位下的 requset
2. 點擊 **Headers** 的 tab
2. 點擊 Request Header 區塊或 Response Header 區塊旁邊的 **view source**
(實際操作沒看到 😑)
:::

### 查看 query string parameters (View query string parameters)

補充: URL 的 query

query: { q: 'react', type: 'Code' }


可以以較容易閱讀的方式查看 URL 的 query string parameters：

1. 點擊 Name 欄位下的 requset
2. 點擊 **Headers** 的 tab
3. 到最下方 Query String Parameters 區塊


- 點擊 **view source** 可以查看原始的 query string parameters
- 點擊 **view URL encoded** 可以查看編碼的 url

> 補充: URL-encoded -https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%8F%B7%E7%BC%96%E7%A0%81


### View cookies
如果 Request 有帶 Cookie 或是 Response 有 Set-Cookie Header 就會出現 Cookies 分頁。

查看在請求的 HTTP headers 中發送的cookie
1. 點擊 Name 欄位下的 requset
2. 點擊 **cookies** 的 tab


### View the timing breakdown of a request
發起 Request 時，首先要經過 DNS lookup、TCP handshake、SSL negotiation 等等階段才能建立連線開始下載內容，Timing 分頁會顯示各個階段所花費的時間：

1. 點擊 Name 欄位下的 requset
2. 點擊 **timing** 的 tab


#### Timing breakdown phases explained
分解階段名詞解釋
- 😱 文件：https://developers.google.com/web/tools/chrome-devtools/network/reference?utm_source=devtools#timing-explanation


<br>

參考自鐵人文章 - [[Day 17] Network - Analyze Requests](https://ithelp.ithome.com.tw/articles/10247206?sc=rss.iron)：


<hr>

### View initiators(發起人) and dependencies
A 檔案需要依賴 B 檔案(在 A 裡 import B ) → A 是 initiator，B 是 dependency

按住 Shift 再 hover Reuqest 可以看到 initiators 變綠色，dependencies 變紅色。


可以從樹狀結構中看出：

- 該 Request 依賴於哪些 Request
- 哪些 Request 依賴於該 Request

(外層為 initiators，內層為 dependencies)


### View load events
顯示 DOMContentLoaded 和 load 事件被觸發的時間

- **DOMContentLoaded** 為藍字、藍線
- **load** 為紅字、紅線

補充：DOMContentLoaded 和 load 差別，[摘自 MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)
> 當整個頁面及所有依賴資源如樣式表和圖片都已完成加載時，將觸發 load事件。 它與 DOMContentLoaded 不同，後者只要頁面 DOM 加載完成就觸發，無需等待依賴資源(例如圖片)的加載。


### View the total number of requests
查看總請求數


### View the total download size
請求的總下載大小


### View the stack trace that caused a request
hover 到 Initiator 欄位中的項目，可以追蹤由 JavaScript 發起的 XHR/Fetch Request。

顯示方式和 Call stack 一樣(後進先出)，代表 Function 由下而上的執行並在頂層 Function 發出 Request。

### View the uncompressed size of a resource
查看尚未壓縮的資源大小

==找不到==文件上說要點擊的這個 **Use Large Request Rows** 圖形

但在 Network 的設定 ⚙︎ 有看到


:::danger
😱 疑問...壓縮後的資源比尚未壓縮的資源來得大？
:::

### Export requests data
可以將 requests 資料存成 .har 檔案或是進行複製。

#### 一、Save all network requests to a HAR file

[HAR file 維基百科](https://zh.wikipedia.org/wiki/.har):
>HTTP存檔格式（HTTP Archive format，簡稱HAR）是一種JSON格式的存檔檔案格式，多用於記錄網頁瀏覽器與網站的互動過程。副檔名通常為.har。

要將檔案另存為 .har 檔：
1. 在 Name 欄按右鍵
2. 選擇 **Save as HAR with Content**，會將打開 DevTools 以來發生的所有請求保存到 HAR 文件中。(無法過濾請求或僅保存單個請求)

可以再將 .har 檔案丟回 DevTools 做分析

#### 二、Copy one or more requests to the clipboard
在 Name 欄下，**按右鍵 → copy**，然後選擇要複製的方式：

- **Copy Link Address:** 複製 request 的 URL
- **Copy Response:** 複製 response body
- **Copy as cURL:** 複製為 cURL
- **Copy All as cURL:** 將所有 requests 複製為 cURL
- **Copy All as HAR:** 將所有 requests 複製為 HAR


### Change the layout of the Network panel
可以改變 Network panel 的佈局，例如讓某些區塊隱藏或顯示

#### Hide the Filters pane
預設下會顯示 Filters pane，可以點擊漏斗圖形將其隱藏


#### Hide the Overview pane
:::danger
找不到按鈕
:::


<br>
<br>
<br>

**參考資料**
1. [chrome devtools - Network(Reference)](
https://developers.google.com/web/tools/chrome-devtools/network/reference)
2. [it鐵人文章-[Day 17]Network - Analyze Requests](https://ithelp.ithome.com.tw/articles/10247206)
3. [it鐵人文章-[Day 16] Network - Filter & Search Requests](https://ithelp.ithome.com.tw/articles/10246590)