Chrome F12 介紹
Chrome 開發者工具 F12 是前端開發、測試人員的利器，使用開發者工具可以非常方便地查看頁面元素、源文件、控制臺、網絡等等。
其中的 Network 類似與 fiddler 抓包工具，能夠獲取請求、響應、緩存等等內容。
接下來介紹下 Network，來吧。
界面介紹
1，界面總覽
2，記錄請求
開啟按鈕時記錄所有請求，關閉按鈕時不會記錄
3，清除請求
清除按鈕，清除所有記錄的請求
4，過濾請求
過濾器，能夠自定義篩選條件，也可以選擇預定義的過濾方式
- 自定義條件
- 預定義的過濾
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文件
10，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文件
