Charles是一款常用的抓包工具，抓包工具可以擷取通過它設定代理伺服器下所有通過他發起與返回的網路請求，和fiddler、wireshark，原理是一樣的。

• Charles主要功能有：
  1、擷取各種協議的網路包
  2、支援修改請求引數
  3、支援修改返回結果
  4、支援模擬弱網測試

• Charles抓包的意義
  定位問題，因為可以獲取發出去的請求，請求頭，請求體，返回的資料，所以可以定位是前端的請求問題，還是後端的返回問題，或者是前端對返回取值的問題。測試同學就可以針對性的提bug，提升效率。除此之外，可以攔截請求，可以修改請求，即可以協助測試同學測試各種異常情況。

• Charles在web端的抓包

  • web端抓包無需新增設定，開啟Charles軟體。

    

  • 此時，在瀏覽器任意的發起請求，比如訪問一個網站，這些請求將被獲取。如圖，我們可以看到，我們訪問的網站的URL，看到status是200（即請求成功）
    
  • 也可以在request看到請求的具體引數，比如我請求登入的usernam與password
    
  • 在response中也看的到請求成功的返回，status為0，介面請求成功，並返回了該使用者的角色，這樣登入成功後前段根據返回引數展示使用者可以訪問的選單。
    

• Charles 修改請求與返回操作
  在測試過程中，我們往往需要測試異常場景，通過正常的造資料，可能比較麻煩，我們就可以在Charles中對請求設定斷點，在發起請求的過程，我們可以修改請求引數去發起請求，在請求成功後，我們可以修改返回的資料。

  • 先發起一次請求，對該請求設定斷點，此次設定後，以後每次請求都將被攔截住。選中此次請求的default，右鍵，然後選擇Breakpoint
    

  • 修改請求： 設定斷點後，重新發一次請求，此時，我們可以看到瀏覽器中一直在轉圈，沒有響應。這是因為請求被攔截中，並沒有傳送出去。這時候我們看Charles，我們能看到有一個 Edit Request，裡面分別有URL、Header、cookies等等，我們分別進行修改，然後點選右下角的Execute按鈕。如果不修改請求的話，直接點選Execute按鈕。【點了Execute按鈕後，此次請求才傳送出去了】
    

  • 修改返回：我們發起請求後，會收到響應的資訊，而響應的資訊，也會被Charles攔截住，此時我們能看到一個 Edit response，裡面分別有 Header、cookie、txt、html等，我們對應修改後，點選右下角Execute按鈕。如果不修改的話，直接點選Execute按鈕。【點了Execute按鈕後，此次響應才真正的返回給client端，即我們在瀏覽器中才收到響應】
    

    
    

• Charles在APP端的抓包
  因為Charles和手機直接沒有連線，所以不能直接抓APP的包，所以手機需要設定代理，將有Charles的電腦設定為代理伺服器，這樣每次手機的包就可以被Charles獲取。

  • 確保電腦和手機在同一個區域網，通過命令 ipconfig或者檢視電腦連線網路的詳細資訊，得到電腦的IP，然後在Charles裡設定一個埠。如圖進入proxy setting彈窗，填寫埠（沒有被佔用的埠都可以），勾選上“Enable transparent HTTP proxying”，這樣設定就完了
    
    

  • 開啟手機，選擇和電腦同一個區域網的WiFi，進入代理設定頁面（多找一下，手機不一樣可能位置不一樣），選擇手動代理，輸入代理伺服器主機名與埠，也可以設定不代理的網址，即訪問該網址的請求都過濾，不攔截。
    

  • 設定完成後，在手機上傳送的請求，即可被Charles獲取，我們就可以分析請求或者返回啦，從而協助我們判斷bug的原因了。

• Charles的弱網設定

  • 我們在測試過程中，需要測試一些網路不好時候的異常場景，我們就可以通過設定Charles，模擬2G、3G的網路情況，設定一些上下行速率，設定一些丟包率。這些設定有行業標準，可以參考行業標準。