charles抓包的安裝，使用說明以及常見問題解決(windows)

Charles 主要的功能包括：

1 . 截取 Http 和 Https 網絡封包。
2 . 支持重發網絡請求，方便後端調試。
3 . 支持修改網絡請求參數。
4 . 支持網絡請求的截獲並動態修改。
5 . 支持模擬慢速網絡。

一、安裝

百度雲盤破解版安裝包下載：鏈接: https://pan.baidu.com/s/1kV3h0gf 密碼: nqaa
官網下載：https://www.charlesproxy.com/download/

筆者使用的版本是：

二、使用說明

1 . 在手機上抓包配置過程：（安裝完成，即可在PC機上直接使用，不需要配置！）

1 . 查看本機的IP 地址：

方法一：打開”運行”（快捷鍵：win+R鍵；或者在任務欄的”搜索”按鈕中查找並點擊”運行”），輸入“cmd”後進入命令行窗口，在命令行窗口中輸入”ipconfig”命令查看IP
方法二：在charles中查看：Help -> Local IP Address

2 . 查看端口：

3 . 在手機設備或者遠程瀏覽器上設置代理，抓取手機設備上的請求包（手機和電腦必須在同一個局域網內，並關閉電腦防火牆、其他代理或者翻牆軟件）

第一步：在手機wifi 上設置代理 -> 手動
- 服務器IP：PC機器的IP（通過之前介紹的查看IP的方法）
- 端口號：8888（通過之前介紹的查看端口的方法）
第二步：Charles彈出詢問“allow”或者“deny”,點擊“allow”按鈕允許；

第三步：抓取https數據需要在手機上安裝證書

Help -> SSL proxying -> Install charles root certificate on a Mobile Device or remote browser…

複製彈出層上的地址 http://charlesproxy.com/getssl或http://www.charlesproxy.com/ssl.zip 到手機瀏覽器打開，點擊 here 下載，安裝，信任；

截取https信息，pc機上也需要安裝Charles的CA證書，還需要設置 SSL 代理
- 菜單欄 Help -> Install Charles CA SSL Certificates…
- 設置SSL代理
  - 選擇Proxy -> SSL Proxying Settings -> SSL Proxy -> Add
  - Host : * (使用通配符表示檢測所有網絡請求；建議還是設置單個需要抓取的https host，儘量避免使用 * 通配符)
  - Port：443
！！！完成以上操作，就完成Charles抓取HTTP(S)數據包的所有配置了。查看Charles,我們可以看到數據包的內容了。

2 . 抓包字段的詳細說明：

Structure：樹狀結構顯示，將網絡請求按訪問的域名分類；
Sequence：水平結構顯示，將網絡請求按訪問的時間排序
垃圾桶圖標：功能是clear，清理掉所有請求顯示信息
Filter ：過濾，可以輸入關鍵字來快速篩選出 URL 中帶指定關鍵字的網絡請求
Overview ：查看這次請求的詳細內容，例如耗時詳細列車了請求開始時間、結束時間，響應開始時間、結束時間，總耗時、DNS耗時、網絡延時等。
對於Size也詳細列出了請求頭大小、響應頭大小、壓縮比例等內容。
- - URL：進行網絡請求的鏈接；
  - Status：當前狀態，complete表示請求完成；
  - Responce Code：返回碼。不同的接口，不同的請求結果，返回碼都不同；
  - Protocol：使用的協議；
  - Method：請求方式，如GET請求，POST請求等；
  - Kept Alive：判斷當前是否正在鏈接（活躍）；
  - Content-Type:發送的內容類型，如這裏用的是XML文本，以UTF8的方式發送；
  - Client Address：客戶端的IP地址；
  - Remote Address：遠程服務器的IP；
- Timing:
  - Request Start Time：請求開始的時間；
  - Request End Time：請求結束的時間；
  - Response Start Time：返回開始的時間；
  - Response End Time : 返回結束的時間；
  - Duration : 總時間；
- Size:
  - Request Header ：請求的頭部大小；
  - Response Header：返回的頭部大小；
  - Request : 請求發送的大小；
  - Response：返回數據的大小；
  - Total：所有數據大小；
  - Request Compression : 請求壓縮；
  - Response Compression : 返回壓縮；
Request ：查看請求內容（底下的Headers，Query String，Cookies，Raw。）
- Headers：發送請求的頭部信息；
- Query String : 發送參數列表；
- Cookies：瀏覽器緩存；
- Raw：發送的原生數據，包括了頭部和參數；
Reponse : 查看響應內容
- Headers：是返回的頭部信息；
- Text：返回信息（除去頭部）後的文本；
- Hex：返回信息的16進製表示；
- XML：我返回的數據是XML。如果你返回的是JSON，這裏就會顯示JSON；
- XML Text：如果你返回JSON，這裏會顯示JSON Text；
- Raw：返回的所有原生數據，包括頭部；
Summary: 查看發送數據的一些簡要信息（主機，狀態碼，數據的類型，header和body大下，加載時間，總時間）
Chart: Summary中簡要信息以圖表形式展示
Notes: 其他信息

三、過濾網絡請求

作用：快速篩選出 URL 中帶指定關鍵字的網絡請求。

方法一：在界面中部的 Filter 輸入框中輸入需要過濾的關鍵字，即可快速篩選出相關網絡請求。（臨時性的包過濾)

方法二： Charles菜單欄 -> Proxy ->Recording Settings ->include。（經常性的包過濾)

方法三：選中想過濾的網絡請求，單擊右鍵 -> 勾選Focus，然後在界面中 Filter輸入框右側的Foucssed選中。（臨時性的包過濾)

四、設置映射（Map）

Map分 Map Remote 和 Map Local 兩種。

Map Local : 將指定的網絡請求重定向到本地文件。
Map Remote : 將指定的網絡請求重定向到另一個網址請求地址。

1 . 設置本地映射（Map Local）

作用：把線上的靜態資源映射到本地：這樣當請求靜態的html、js和css等資源的時候會使用本地的信息，方便調試並及時看效果。

1 . 設置本地映射

第一步：選中某一條包數據，右鍵，選擇最低端的 Map Local

第二步：修改 path 爲
如：【/yundai/*】這樣的地址，設置local path 爲【E:\webstorm\yd_h5\debug\】這樣的本地路徑；
表示所有的域名+/yundai/下面的目錄都替換成，本地路徑下的相對應的文件；

2 . 查看所有的本地映射

Tools -> Map Local , 可以查看所有的本地映射配置。

在Overview的Nodes中查看。

2 . 設置遠程映射（Map Remote）

1 . 設置遠程映射

第一步：選中某一條包數據，右鍵，選擇最下面的 Map Remote
第二步：將請求映射到遠端寫好的接口。推薦一個生成接口的鏈接 Mocky：http://www.mocky.io/
如：本地請求按協議、主機、端口、路徑和參數分別對應遠程接口的相關字段，沒有則不填；

2 . 查看所有的遠程映射

Tools -> Map Remote , 可以查看所有的本地映射配置。

在Overview的Nodes中查看。

3 .重發網絡請求

選中某調請求，右鍵選則 “Repeat”重複發送一次該請求；
選中某調請求，右鍵選則 “Repeat Advanced…”設置請求次數（Iterations），重複間隔（Concurrency），重複發送多次該請求。

4 . 修改網絡請求參數

1.選中一條請求，右鍵選擇“Edit”，就可以編輯請求內容。

2.在編輯框中修改請求內容，“cancle”取消修改，“Revert”恢復原狀，返回原來的狀態，“Excute”執行修改的請求。

3.修改完成之後，點擊“Excute”，執行修改的請求。

4.返回修改後的響應內容。

5 . 網絡請求的截獲並動態修改

方法一：本地映射
- Charles進行抓包
- 選擇某一個網絡請求 > 鼠標右鍵 Save Response…
- 如果該請求返回的是一個json串，保存文件時需要保存rename.json
- 需要更改的請求點擊右鍵 Map Local.. 指定到本地保存的renam.json.
- 通過在本地更改rename.json就可以自動的更改請求的返回值。
方法二：打斷點（Breakpoints）
- 選擇某一個網絡請求 > 鼠標右鍵 Breakpoints
- 然後點擊 Execute 執行，然後編輯返回值。
- 缺點：容易請求超時。還沒等你調整完返回數據，app那邊已經請求超時了。
方法三：遠端映射
- 將App內部的請求映射到遠端寫好的接口。推薦一個可以自己生成接口的鏈接： Mocky：http://www.mocky.io/。
方法四：rewrite（mac上支持，但在windows上有點問題，暫不支持該方法）
- 菜單欄 Tools —> Rewrite
- 根據自己的需求重寫…。
- 推薦網址：http://www.cnblogs.com/wonyun/p/5586746.html

常見問題解決

1 . 手機無法抓包的問題

檢查是否配置好代理IP,端口號
檢查是否與電腦在同一個局域網
檢查是否關閉防火牆，代理，翻牆軟件
彈出詢問點擊“allow”或者“deny”時，誤點“deny”，關閉charles重啓，手機再次瀏覽則會重新彈出詢問

2 . 解決request和response信息中的中文亂碼問題。

方法一：修改charles windows版本安裝目錄下也有一個Charles.ini的配置文件
- 原配置文件

working.directory=.
classpath.1=lib/charles.jar
main.class=com.xk72.charles.gui.MainWithClassLoader
vm.version.min=1.4
vm.heapsize.preferred=256M
vm.location=jre\bin\client\jvm.dll
vmarg.1=-Dsun.java2d.d3d=false
vmarg.2=-Djava.net.preferIPv4Stack=true
dde.enabled=true
dde.class=com.xk72.charles.win32.Win32DDEManager
dde.server.name=Charles
dde.topic=System
single.instance=dde

[ErrorMessages]
java.not.found=A suitable Java installation was not found. Please visit http://java.com/ to install Java.
java.failed=The Java installation is broken. Please uninstall and reinstall Java from http://java.com/

- 修改後的配置文件增加vmarg.3參數，並設置編碼格式爲UTF-8

working.directory=.
classpath.1=lib/charles.jar
main.class=com.xk72.charles.gui.MainWithClassLoader
vm.version.min=1.4
vm.heapsize.preferred=256M
vm.location=jre\bin\client\jvm.dll
vmarg.1=-Dsun.java2d.d3d=false
vmarg.2=-Djava.net.preferIPv4Stack=true
vmarg.3=-Dfile.encoding=UTF-8
dde.enabled=true
dde.class=com.xk72.charles.win32.Win32DDEManager
dde.server.name=Charles
dde.topic=System
single.instance=dde

[ErrorMessages]
java.not.found=A suitable Java installation was not found. Please visit http://java.com/ to install Java.
java.failed=The Java installation is broken. Please uninstall and reinstall Java from http://java.com/

方法二： Tools -> Rewrite… -> Rules -> Add –>配置信息
- 選中 Request 和 Response
- Match
  - Name : Content-Type
  - Value : application/x-zip
- Replace
  - Name : Content-Type
  - Value : application/json;charset=UTF-8
- 選中 Replace All

–》點擊OK，完成配置。

！！！通過以上方法就可以解決Request和Response的中文亂碼問題了。

3 . 本地映射配置錯了，刪除錯誤的映射

Tools -> Map Local… -> 選中需要刪除的映射 -> Remove -> OK

更多資料參考【抓包工具Charles的使用心得】(http://www.jianshu.com/p/fdd7c681929c)

【MAC上charles使用教程總結】(http://www.jianshu.com/p/18449f5f9d1c)

【Charles 從入門到精通】(http://blog.devtang.com/2015/11/14/charles-introduction/)

注意：不抓包請關閉手機HTTP代理，否則斷開與電腦連接後會連不上網

charles抓包的安裝，使用說明以及常見問題解決(windows)

charles抓包的安裝，使用說明以及常見問題解決(windows)

Charles 主要的功能包括：

一、安裝

二、使用說明

1 . 在手機上抓包配置過程：（安裝完成，即可在PC機上直接使用，不需要配置！）

2 . 抓包字段的詳細說明：

三、過濾網絡請求

四、設置映射（Map）

1 . 設置本地映射（Map Local）

2 . 設置遠程映射（Map Remote）

3 .重發網絡請求

4 . 修改網絡請求參數

5 . 網絡請求的截獲並動態修改

常見問題解決

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

京東面試：如何進行JVM調優？

Python 將PowerPoint (PPT/PPTX) 轉爲HTML

SQL優化-20231016

Node.js和angular.js心得小扎

Sass/SCSS（關係，安裝，webstorm配置編譯，使用，語法）

你不知道的CSS3選擇器--精闢用法

CSS引入的方式有哪些? link和@import的區別是?

數組和僞數組的區別

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

charles抓包的安裝，使用說明以及常見問題解決(windows)

charles抓包的安裝，使用說明以及常見問題解決(windows)

Charles 主要的功能包括：

一 、安裝

二、使用說明

1 . 在手機上抓包 配置過程：（安裝完成，即可在PC機上直接使用，不需要配置！）

2 . 抓包字段的詳細說明：

三、過濾網絡請求

四、設置映射（Map）

1 . 設置本地映射（Map Local）

2 . 設置遠程映射（Map Remote）

3 .重發網絡請求

4 . 修改網絡請求參數

5 . 網絡請求的截獲並動態修改

常見問題解決

一、安裝

1 . 在手機上抓包配置過程：（安裝完成，即可在PC機上直接使用，不需要配置！）