無需額外工具，又小拍的簡單抓包教程

你們可能都據說過一個名詞，「抓包」。好比軟件開發先後端聯調，調用後端接口無反應，這時咱們經常會說：「抓個包看看前端傳遞的數據吧」。又或者咱們的網站接入 CDN 以後，想要看一下網站靜態資源的緩存時間和本身設置的緩存策略是否一致，也會用到抓包。那什麼是抓包呢？

主機之間的數據通訊都是經過網絡來進行傳輸，而將網絡傳輸發送與接收的數據包進行截獲、重發、編輯、轉存等操做，就是抓包。

抓包常常被用來進行數據截取與觀察，用於獲取 HTTP 標頭、內容、大小等信息來進行分析，對判斷軟件的 Debug 很大的幫助。因此，學會抓包，對於排查一些網絡問題十分重要。

主流抓包工具對比

先來簡單看下有哪些常見的抓包工具，主要有下面幾種：

• Charles
• Fiddler
• WireShark
• TcpDump
• Chrome Network

其中目前主流的抓包工具備：TcpDump、WireShark、Fiddler，下面咱們對這幾個抓包工具的性能進行一些簡單的對比。

1. TcpDump

Android 平臺下的網絡數據抓包工具，Android模擬器中自帶 TcpDump 文件。

用 TcpDump 對網絡數據抓包，手機不用走代理——將網絡數據包添加到 WireShark 中分析便可。

缺點：

• 手機必須獲取 root 權限；
• 不能查看實時通訊數據——由於抓取的是 dump 出來的文件，而不能實時數據交互；
• 獲取的數據不少，分析時須要過濾出真正有用的信息。

2. WireShark

PC 端截獲、分析經過該網卡的全部網絡通訊的數據包（針對移動端時候，就要對移動端設置代理服務器）強大的工具，完整查看網絡中的每層、每一個協議、每一個數據包的詳細組成信息；TCP、UDP、HTTP、HTTPS 等協議的數據包都可獲取；

缺點：

• 獲取的信息太多，須要手動過濾、進行分析。
• 只能查看，不能修改、重發送網絡數據包。

3. Fiddler

HTTP 協議的代理工具，抓取、分析電腦中全部進出該網卡、與網絡進行數據交互的數據（針對移動端抓包時，須要設置代理服務器)，主要針對的是 HTTP/HTTPS 協議；可以清晰查看數據包中的內容——HTTPS中的數據包能夠解密出來。

缺點：

• 只適用於一次請求，下次請求須要從新設定
• 手動修改須要花費時間，若是程序等待超時，本次設定的 Response 結果失效

Chrome Network 抓包介紹

上文中能夠看到主流的抓包工具都或多或少地存在缺點，那有沒有一款界面簡單、易操做，能夠很是方便的查看網頁中全部的網絡請求，並審覈檢查單個資源的屬性，好比 HTTP 標頭、內容、大小等的抓包工具呢？

Chrome Network 就能夠作到。Chrome Network 是屬於 Chrome DevTools 套件中的一個調試工具，下面我來對它的使用作一個簡單介紹。

注：本篇教程適用於使用 Chromium 內核的瀏覽器，Microsoft Edge 和 Firefox 也有相似的控制面板，在此再也不贅述。

如何打開開發者工具面板

1. 使用快捷鍵打開。

• Control+Shift+J 或者 F12 (Windows)
• Command+Option+J (Mac)

2.經過 [更多工具] - [開發者工具] 打開。

打開開發者工具後，切換到 [Network 面板]，面板的構成可查看下圖：

• 控制器：能夠開啓/關閉 Network 工具的網絡活動記錄功能，以及其它一些配置選項。
• 過濾器：過濾請求列表中顯示資源。
• 概覽：以圖形化的方式，顯示 HTTP 請求響應的時間軸。
• 請求列表：網頁中每個資源請求記錄，默認時間排序，點擊可查看詳細信息。
• 概要：包含了當前抓取的請求數，傳輸大小以及傳輸耗時等信息

接下來咱們就來認識一下各個模塊。

控制器

從左至右按鈕的功能依次是：

• 中止/開始抓包，紅色圓圈表明正在抓包；
• 清除請求列表中的全部請求；
• 屏幕截圖；
• 隱藏/顯示過濾器窗格；
• 查找搜索；
• 增大請求列表每一行的行高；
• 隱藏/顯示概覽窗格
• 按照框架來整合資源
• 跨頁面加載保存請求
• 停用瀏覽器緩存
• 模擬離線訪問
• 模擬慢網速訪問，可自定義網速

咱們簡單的來體驗一下其中幾個功能的使用。

場景一：如何模擬在本地沒有緩存的狀況下訪問網頁？

咱們能夠打開控制器的 [Disable cache] 功能，從新刷新頁面，瀏覽器會模擬不帶緩存的請求訪問，保證每個請求都是向網絡中發起的。

場景二：請求列表只記錄當前頁面的訪問請求，若是點擊了一個超連接，跳轉到另外一個網頁，這樣就會清空以前的記錄。可否在點擊連接跳轉以後，依舊保存以前的請求記錄呢？

咱們能夠打開控制器的 [Preserve log] 功能，這樣在點擊連接跳轉到新的頁面後，跳轉前的請求記錄依舊會保留，方便咱們跟蹤請求響應。

過濾器

咱們在訪問一個網站的時候，可能會有幾十個或者上百個請求，這些請求中有些是咱們關心的，有些是咱們不須要的，這個時候就能夠快速的使用過濾器來篩選出咱們關心的那些請求。

過濾器常見的過濾方式就是按類型過濾。

默認過濾中已經內置幾種類型，比方說咱們能夠篩選出 JS 類的請求、圖片類的請求或者是WebSocket 類型的請求，按住 [Ctrl(Windows)] 或者 [Command(Mac)] 能夠同時選擇多個過濾類型。
那麼 [Hide data URLs] 選項是什麼意思呢？

網站開發者不少時候會將一些小的圖片或者 CSS 腳本，以 BASE64 格式嵌入到 HTML 中，以減小 HTTP 請求數。當勾選了 Hide data URLs 選項後，就能夠隱藏掉請求列表中的像 data: 或者 blob: 類請求。

除了以上幾個 Chrome 提供的過濾器之外，還能夠很是靈活的在過濾框中使用過濾屬性進行請求日誌的篩選。

常見的過濾屬性可參考下表。

場景一：打開又拍雲官網的時候，咱們想篩選網頁中來自於不一樣域名的請求資源，就能夠在過濾框中輸入 [domain:] ，Chrome 會幫咱們自動補齊相關的域名信息。

場景二：打開的網頁中，如何查看哪些請求使用了緩存？使用命令 [is:from-cache]

請求列表

請求列表默認是按照資源請求發起的時間升序排列的，咱們也能夠選擇按指定列排序，例如 [Waterfall] 列上右鍵，按照活動時間來進行排序。

請求列表中默認每列的含義爲：

• Name：請求資源的名稱
• Status HTTP：狀態碼
• Type：請求資源的 MIME 類型
• Initiator：發起請求的對象或進程
• Size：服務器返回的響應大小（包括頭體和包體），可顯示解壓後大小
• Time：總持續時間，從請求的開始到接收響應中的最後一個字節
• Waterfall：各請求相關活動的直觀分析圖

咱們也能夠添加其它的一些列目錄，在請求列上右鍵呼出菜單，可看到更多列選項。

此外咱們也能夠配置自定義列，在請求列上右鍵呼出菜單-Response Headers- Manage Header Columns 中添加想列出的響應頭信息。

場景：如何自定義顯示請求通過了CDN 的哪些節點？

CDN 會在每個響應頭中添加上Via 響應頭，那麼咱們就能夠自定義請求列表顯示 Via 列。

HTTP 請求與響應

點擊請求列表中的具體的請求，則能夠打開請求內容詳情，在內容詳情中咱們能夠執行如下操做：

• 查看 HTTP 請求/響應頭部
• 查看 cookie
• 預覽響應正文，例如查看圖像
• 查看響應正文
• 時間詳細分佈
• 將請求數據複製到剪貼板
• 查看未壓縮的資源大小，Use Large Request Rows

場景一：查看請求的響應與請求報文

場景二：預覽圖片

場景三：將一個請求導出爲 cURL 命令

在請求上右鍵呼出菜單，選擇 Copy 選項。

以上就是對 Chrome 的 Network 面板的介紹，經過一些場景來幫助你們理解使用面板的功能。相比起 Wireshark 等一些網絡抓包工具而言，Chrome Network 更爲簡單易用，查看 HTTP/2 或者 HTTPS 等請求報文也更爲方便，對於前端展現或者網絡鏈接產生的一些問題，定位也更爲輕鬆快捷。

推薦閱讀

IPv6 時代如何防護 DDoS 攻擊？

二狗子 、初戀及HTTPS