Charles 使用手冊

時間 2019-11-30

標籤 charles 使用手冊简体版

原文原文鏈接

Charles能作什麼

抓取 Http 和 Https 的請求和響應，抓包是最經常使用的了。
重發網絡請求，方便後端調試，複雜和特殊狀況下的一件重發仍是很是爽的（捕獲的記錄，直接repeat就能夠了，若是想修改還能夠修改）。
修改網絡請求參數（客戶端向服務器發送的時候，能夠修改後再轉發出去）。網絡請求的截獲和動態修改。
支持模擬慢速網絡，主要是模仿手機上的2G/3G/4G的訪問流程。
支持本地映射和遠程映射，好比你能夠把線上資源映射到本地某個文件夾下，這樣能夠方便的處理一些特殊狀況下的bug和線上調試（網絡的css，js等資源用的是本地代碼，這些你能夠本地隨便修改，數據之類的都是線上的環境，方便在線調試）；
能夠抓手機端訪問的資源（若是是配置HOST的環境，手機能夠借用host配置進入測試環境）

Charles設置成系統代理

啓動 Charles 後，第一次 Charles 會詢問你是否把Charles設置爲系統的代理，若是此時你忽略了這個詢問窗口，你能夠在後期設置的；將 Charles 設置成系統代理：選擇菜單中的「Proxy」 -> 「Mac OS X Proxy/windows proxy」來將 Charles 設置成系統代理。css

1.Charles基礎配置

1.1Charles兩種視圖

視圖結構html

viewers

Charles 主要提供兩種查看封包的視圖，分別名爲「Structure」和「Sequence」。前端

Structure/結構視圖，將網絡請求按訪問的域名分類，好比某個域名下有n個資源請求，那麼全部此域名下的請求都會在這裏作一個詳細的分類；
Sequence/序列視圖，將網絡請求按訪問的時間排序，按照你的電腦的發送請求順序進行。

1.2 內容過濾

直接過濾域名 sequence視圖下使用filter
修改Include的域名和端口 在 Charles 的菜單欄選擇「Proxy」->」Recording Settings」，而後選擇 Include 欄，選擇添加一個項目，而後填入須要監控的協議，主機地址，端口號。這樣就能夠只截取目標網站的封包了;
過濾焦點域名

在目標的網絡請求上右鍵，選中focus（此時，該域名已經被設置爲一個焦點標記了；）；而後點擊fillter後面的focused來篩選你的作的focus標記文件；設置的焦點域名在」focused Hosts」裏面能夠查看和管理。

在structure模式下看更直觀

1.3 Charles截取 Chrome 和 Firefox 瀏覽器的網絡請求內容

須要注意的是，Chrome 和 Firefox 瀏覽器並不必定使用的就是本機，多是一些代理工具，而 Charles 是經過將本身設置成代理服務器來完成資源記錄的，因此若是你的charles沒法截取 Chrome 和 Firefox 瀏覽器的網絡請求內容，須要在瀏覽器裏作下修改。在 Chrome 中設置成使用系統的代理服務器設置便可，或者直接將代理服務器設置成 127.0.0.1:8888 也可達到相同效果。webpack
chrome://settings/?search=%E4%BB%A3%E7%90%86ios

備註：若是您的chrome有用過改hosts文件工具，請暫時關閉；不然chrome會經過你的擴展控制，不能使用charles；你的chrome中可能會看到 您的網絡代理設置是由擴展程序管理的。

1.3.1 chrome 使用 SwitchyOmega 鏈接代理

SwitchyOmega鏈接pac；或者直接鏈接charles代理；這樣繞過系統代理配置；對於代理配置衝突的狀況下可使用SwitchyOmega，切換很是方便。git

1.4 hosts文件工具

charles可使用系統hosts或三方hosts工具設置的系統hosts配置，也可使用自帶的map remote功能實現映射功能。github

switchhosts 推薦
Gas mask 2 夠用
Helm 通常

1.5 https協議抓包

打開Charles, 點擊Help->SSL Proxying->Install Charles Root Certificate
proxy - proxy settings - proxies - enable socks Proxy
proxy - proxy settings - Mac OS X - Enable MacOS X - use socks proxy （這個彷佛無關緊要）
ssl proxy settings - ssl proxying - add 要代理的https www.baidu.com 443

每步最好重啓一下 charles 來保證配置生效。

證書安裝

help - SSL Proxying install charles proxying certificate

移動端使用charles代理

chls.pro/ssl 安裝證書 , ios必須使用safari ，第一步在「描述文件與設備管理」中安裝，而後在通用 - 關於本機 web
證書信任設置啓用證書（fiddler的證書安裝和charles基本類似）chrome

1.6 斷點

能夠中斷掛起請求，對目標網址進行監控

2. charles進階配置

1.Map功能

map local情景：一個項目上線後，發現js或者css bug了，怎樣調試？線上項目的靜態文件沒法直接編輯，有何方法在不改變其餘參數的狀況下直接用本地的開發文件替換線上的文件從而方便調試？windows

tools->>map local

Save Response… map local能夠結合這個功能來mock，稍加修改就能夠模式想要的測試數據。

map remote情景：進行一個需求開發，測試環境是：lvxing.st.meituan.com，測試完成，前端開發者上線了，如今QA須要跟蹤線上狀況，如何切到線上環境？

tools->>map remote

Bypass proxy settings for these Hosts & Domains 繞過charles的配置，這樣charles上的這個配置就失效了，可是不影響hosts工具的配置。

出現衝突時，默認hosts的優先級高

2.rewrite功能

rewrite功能重寫對應的內容，主要能夠對某些匹配請求的header、host、url、path、query param、response status、body進行rewrite。

rewrite能夠作不少手腳。

use a dynamic port

blog.csdn.net/laxian2009/…

3. charles高級

1.黑白名單

charles黑名單和白名單工；black list：阻止對匹配HOST的請求；能夠直接把請求丟掉，也能夠直接返回403狀態碼；

修改服務器返回內容 www.jianshu.com/p/f7ceb7992…

4.常見問題

1. charles提示「SSL Proxying not enabled for this host: enable in Proxy Settings, SSL locations」

出現這種狀況，charles解析不出path，咱們就無法創建映射。具體的解決方案爲在proxy中的SSL Proxying setting中鉤上Enable SSL Proxying，而且將要解析的host加上

2. Proxy-->Proxy Settings中在options中加入hosts： bypass charles for these Hosts &Domains

3. 沒法訪問localhost or 127.0.0.1

沒法訪問localhost or 127.0.0.1:將訪問地址的 localhost 改成 localhost.charlesproxy.com

4. 常見問題 www.cnblogs.com/1-434/p/787…

5. https無效證書問題以及忽略證書錯誤

safari瀏覽器能夠經過信任證書來解決，可是在app中缺乏「繼續訪問不可信站點的設置」。

fiddler 是這樣解決的 ignore server certificate errors

6.charles界面看不到請求內容？

若是有多個設備鏈接，都嘗試一下請求，排除因設備配置緣由形成的問題
若是其餘設備正常，例如手機端請求能夠走代理, pc端不能走代理可能有幾個緣由：
- 使用了pac代理或其餘代理
- 本地hosts工具配置映射和charles衝突，hosts優先級更高

7.瀏覽器世界的正確referer

referer的正確英語拼法是referrer因爲早期http規範的拼寫錯誤，爲了保持向後兼容就將錯就錯了，但也有新的網絡技術糾正此問題，因此拼法不一

8.PAC自動代理文件格式，如何寫PAC文件

www.cnblogs.com/kzd666/p/41…

最基本的寫法就是一個function函數

function FindProxyForURL(url, host) {
    var lastPos;
    var host_tmp = host;
    var prefix = '*.';
    do {
        if (autoproxy_host.hasOwnProperty(host_tmp)) {
    		return 'PROXY proxy.oasec.mycomp-int.com:8080';
        }
        
        lastPos = host.indexOf('.') + 1;
        host = host.slice(lastPos);
        host_tmp = prefix.concat(host);
    } while (lastPos >= 1);
    return 'DIRECT';
}
複製代碼