前端周邊----charles抓包

前言

開發過程當中常常會使用到抓包工具來進行代理。若是你想把測試機或者開發機甚至是線上的文件換成你本地的文件進行快速驗證。這種方法會很方便。尤爲是遇到線上Bug。本篇文章主要介紹了charles的安裝及使用。圍繞如下幾點：

• charles的安裝
• charles與手機端的代理配置
• charles的使用

charles的安裝

安裝這裏不作太多贅述。網上處處都是安裝教程，步驟也比較簡單。有一種更換jar包來破解的方式，不過我的建議仍是在官網下載。而後使用註冊碼破解便可，提供一組註冊碼以下

// Charles 4.2目前是最新版，可用。

Registered Name: https://zhile.io

License Key: 48891cf209c6d32bf4

charles與手機端的代理配置

配置步驟

1. 想要將測試機換成本地文件，首先要保證此時這個手機和電腦處於同一局域網之下。
2. 查詢電腦本地ip和charles所佔用端口。（電腦ip可使用命令行ipconfig查詢。charles佔用端口能夠在charles的proxy->Proxy Settings查詢。咱們使用的是http代理。故HTTP Proxy 的port就是咱們要查詢的端口號，通常默認爲8888）
3. 手機鏈接與電腦相同的wifi，並在wifi設置中手動設置http代理。將剛纔查詢的電腦ip和charles端口號輸入便可。（通常長按wifi或點擊所連wifi後的！便可進入http代理設置）
4. 用手機進入任意會向服務器發起請求的網頁，此時的charles會彈出一個對話框，點擊allow便可

常見的問題

• 抓到的包顯示unknow或亂碼。

形成這個問題的緣由是訪問了https網頁。因爲https的安全性，須要下載相關的信任證書才能夠正常使用。進入charles的Help->SSL Proxying->install charles root certificate爲電腦下載證書。這裏建議一開始下載時就將證書存儲在受信任的根證書頒發機構，後面就不須要再添加信任了。此外，手機也須要下載證書，一樣進入charles的Help->SSL Proxying->install charles root certificate on a mobile device or remote browser而後在手機上輸入彈出對話框的網址便可下載證書。如今應該能夠正常使用了。

• iOS相關

在ios端下載證書時，打開網址後按照提示安裝描述文件，這裏它會自動引導你去驗證，跟着提示操做就能夠了。可是此時返回charles仍是沒法正常抓包。這時其實還有一個信任證書的設置。須要打開 設置->通用->關於本機->證書信任設置。勾選剛剛安裝的證書，此時就能夠正常使用了。

charles的使用

開發過程當中，咱們主要會使用抓包工具來定位bug位置。如今，先來認識一下charles的界面。charles有兩種界面分別是structure和sequence。structure視圖是將網絡請求按訪問的域名分類，Sequence 視圖是將網絡請求按訪問的時間排序。工具欄功能用下圖說明

此外，charles擁有不少使用起來很方便的功能，下面來介紹幾個功能。

過濾網絡包

咱們在抓取請求時，許多時不須要關注的資源請求。這時候能夠經過過濾網絡包來過濾掉這些請求，在這裏有三種實現方式。

• 第一種

直接在sequence中的filter輸入須要過濾的東西。能夠是簡單的網址甚至是關鍵字，就會只保留這一部分的請求，複雜一點的能夠點擊後面的setting,使用正則表達式。

• 第二種

右鍵須要過濾的網址。點擊Focus，而後選中Filter後面的Focussed

• 第三種

點擊charles中的Proxy->Recording Settings，選擇彈出框中的include欄。點擊Add。填入須要監控的協議，主機地址，端口號。

這三種方法的區別是，前兩種主要適用於一些臨時的過濾，第三種是常常性過濾。

壓力測試

當咱們須要對一個地址不停的請求訪問，作壓力測試時。首先選中這個地址，而後打開Tools->Advanced Repeat。在彈出框中選擇併發線程數和打壓次數就能夠開始測試了。

修改服務器返回內容

charles提供了Map功能、Rewrite功能以及Breakpoints功能。均可以達到修改服務器返回內容的目的。下面，逐一介紹這三種功能。

Map功能

charles的Map分爲Map Remote和Map Local兩種。Map Remote是將網絡請求重定向到另外一個網址請求地址，Map Local是指將網絡重定向到本地文件。

• Map Local

右擊須要重定向到本地文件的請求點擊Save Response。記住存儲在本地的位置。而後進入Tools->Map Local勾選Enable Map Local。點擊Add添加你要定向到哪一個網址的URL。在彈出框中填寫該網址，而且在下面的Map To填寫剛剛記住的本地位置。點擊全部OK後在瀏覽器輸入剛設置的URL，能夠看到，該URL對應的網頁被重定向到本地文件了。

• Map Remote

進入 Tools->Map Remote 我這裏是把baidu的網址定向到taobao

Rewrite功能

Rewrite功能能夠對請求響應的內容進行修改。首先Tools->Rewrite。勾選Enable Rewrite，添加一個set。舉例以下圖

將cookie中的ctid從18修改爲11

Breakpoints功能

Breakpoints和普通IDE同樣都是斷點調試。它不只能夠攔截客戶端的request、response還能夠進行修改。 對須要過濾的網址右擊選中Breakpoints。而後在工具欄中點擊斷點按鈕，此時在網頁發起請求後能夠看到程序被中斷到Request，這個時候能夠修改相關參數。

修改結束點擊Execute能夠結束當前中斷獲得服務器響應。獲得服務器響應後咱們依然能夠編輯直到點擊Execute。

限制網絡速度，模擬慢網

charles能夠達到模擬各類網絡環境的效果，能夠在Proxy->Throttle Setting進行設置

以上。