1、Chrome F12 介紹

Chrome 開發者工具 F12 是前端開發、測試人員的利器， 使用開發者工具可以非常方便的檢視頁面元素，原始檔，控制檯，網路等等。

其中的 Network 類似與 fiddler 抓包工具，能夠獲取請求、響應、快取等等內容。

接下來介紹介紹下 Network，來吧。

2、介面介紹

1、介面總覽

點選有驚喜

2、記錄請求

開啟按鈕時記錄所有請求

關閉按鈕時不會記錄

3、清除請求

清除按鈕，清除所有記錄的請求

4、過濾請求

過濾器，能夠自定義篩選條件，也可以選擇預定義的過濾方式。

4.1、自定義條件

4.2、預定義的過濾

ALL：顯示所有請求 XHR：顯示AJAX非同步請求 JS：顯示js檔案 CSS：顯示css檔案 Img：顯示圖片 Media：顯示媒體檔案，音訊、視訊等 Font：顯示Web字型 Doc：顯示html WS:顯示websocket請求 Other:顯示其他請求 
 

5、保留請求記錄

勾選之後，重新整理頁面不會清空之前的請求記錄，下面是連續重新整理兩次頁面結果

6、是否進行快取

當開啟開發者工具時生效，開啟這個開關，則頁面資源不會存入快取，可以從 Status 欄的狀態碼看檔案請求狀態。

7、弱網設定

設定模擬限速，如下圖所示。

8、網路設定

caching：快取設定

Network throttling ：弱網設定

User agent：屬於 http 請求頭一部分。表示所用瀏覽器型別及版本、作業系統及版本、瀏覽器核心、等資訊的標識。

Accepted Content-Encodings：服務端壓縮格式

9、右鍵介面

Open in new tab:在新的標籤中開啟連結
Clear browser cache：清空瀏覽器快取
Clear browser cookies：清空瀏覽器cookies
Copy：複製
Block request URL：攔截當前請求url
Block request domian：攔截當前域名下所有請求
Replay XHR:重新請求AJAX
Sort By：排序請求
Header Options：顯示請求頭選項
Save all as HAR with content：儲存所有請求為.har檔案

copy：

Copy Link Address：複製資源url到系統剪貼簿
Copy Response：複製HTTP響應
Copy stack trace：複製堆疊資訊
Copy 
 
as PowerShell：複製請求PwoerShell程式碼
Copy as fetch：複製請求fetch程式碼
Copy as Node.js fetch：複製請求Node.js fetch程式碼
Copy as cUrl（cmd）：複製請求cUrl 命令程式碼
Copy as cUrl（bash）：複製請求cUrl 命令程式碼
Copy all as PowerShell：複製所有請求PwoerShell程式碼
Copy all as fetch：複製所有請求fetch程式碼
Copy all as Node.js fetch：複製所有請求Node.js fetch程式碼
Copy all as cUrl（cmd）：複製所有請求cUrl 命令程式碼
Copy all as cUrl（bash）：複製所有請求cUrl 命令程式碼
Copy All as HAR：複製所有請求HAR檔案