推薦2個前端工具：Charles和Postman

5.1假期次日，依然窩在家裏，不過今天來客了，個人好朋友「曉哥」來看小寶，中午喝了點，各自「吹噓」了一陣，聊聊各自職業的發展，工做中遇到的問題，以及對將來的規劃。

他如今發展的特別好，在一家近千人開發的公司，主管北京地區的業務，包括需求洽談、研發、項目推動和驗收等，公司業務是爲多家銀行作app端，和我分享了他在管理上的一些經驗，真心爲他高興，祝愈來愈好。

話題一轉，說說今天的主角：2個工具，一個是抓包工具Charles，一個是API調試工具Postman。前幾天，嘗試使用Charles抓取 Websocket 的消息，折騰了很久才成功，Postman也同樣，安裝了app版本，也遇到了一些問題，想把過程分享給須要的朋友。

Charles

Charles是一個HTTP代理/HTTP監視器/反向代理，它容許開發人員查看他們的機器和Internet之間的全部HTTP和SSL/HTTPS通訊，包括請求、響應和HTTP頭(包含cookie和緩存信息)。

基本原理就是將本身做爲代理服務器，瀏覽器、手機app等客戶端進行代理設置，配置成Charles監聽的端口，客戶端將請求發給Charles，Charles再將請求發送給真正服務器，結果返回時，由Charles轉發給瀏覽器、手機等客戶端。

下面說明各類協議的請求抓取，環境以下：

• 使用Android手機做爲客戶端，模擬發送各類請求；
• 在Mac電腦上安裝Charles應用程序，做爲代理服務器；
• 抓取小米商城app的各類請求；
• 保證Android、Mac鏈接同一個網絡；

配置

第一步，Charles代理設置，只要設置下端口便可：

第二步，配置手機Wifi代理（每一個手機不一樣）：

選擇手動代理，主機名爲mac的ip地址，端口號爲第一步配置的端口，配置完成後，mac端會提示容許接入，選擇Allow便可：

這樣小米商城app的一些請求，就能夠查看到了：

抓取HTTPS請求

要抓取HTTPS請求，須要配置證書，過程以下：

第一步，在mac上安全charles根證書：

第二步，保存charles根證書爲cer格式，發送到手機，安裝證書：

安裝完成後，能夠在安全設置中查看到這個證書：

第三步，開啓SSL代理

這樣設置以後，就能夠抓取https請求了，內容也不會亂碼了：

抓取Websocket請求

3.11版本以後，開始支持websocket抓取，以下：

不知道什麼緣由，使用上面wifi代理配置，沒法抓取到websocket請求，查了不少文章都沒有成功，最後，看到一句話：有些協議不會通過wifi代理，就想到使用全局代理app，應該會支持websocket協議，最後驗證是能夠的。

我選擇了drony代理app，使用其餘代理app應該也能夠，首先，配置代理服務器，和以前相似：

進入setting選項卡，選擇Wi-Fi：

找到使用的網絡名，點進去設置，設置爲charles的地址地址和端口：

這樣設置後，就能夠抓取到websocket請求了：

其餘功能介紹

還能夠提供如下功能，這裏就不展開說了，網上也有不少資料：

• 模擬慢速網絡；
• 修改網絡請求內容，屢次發送請求；
• 給服務器作壓力測試；
• Map功能，能夠將app請求到測試環境；
• Breakpoints功能，當指定的網絡請求發生時，Charles會截獲該請求，能夠在Charles中臨時修改網絡請求的返回內容；

感興趣的能夠查看這篇文章瞭解：傳送門

Postman

Postman是一種網頁調試與發送網頁http請求的應用，能夠用來很方便的模擬get或者post或者其餘方式的請求來調試接口。

以前一直使用Chrome app版本，最近這個版本不維護了，提示使用應用程序版本，這個工具使用比較簡單，我就說說我以爲比較棒的功能。

環境管理

系統都有測試環境和線上環境，請求url確定不同，一些參數也可能不同，能夠經過切換不一樣的環境，動態變化，這樣只需配置一次url和參數便可。

經過上面的設置，就能夠在url配置中使用環境變量了：

Collections

能夠保存咱們的請求，不用打開都從新設置請求地址和參數了：

工做空間

新版本提供了工做空間的功能，可在不一樣的項目中切換:

抓取瀏覽器的請求

能夠自動映射到參數、cookie信息，對應須要登陸後調用的接口，能夠如今瀏覽器登陸，經過抓取，就能夠自動設置cookie信息了。

第一步，Postman開啓代理端口：

第二步，瀏覽器設置代理爲第一步開啓的端口：

我使用瀏覽器插件SwitchyOmega進行了設置，這樣在瀏覽器中訪問網站，就會在Postman的History中顯示了：

歡迎掃描下方二維碼，關注個人我的微信公衆號，分享個人工做、學習和生活 ~