Web開發生存工具使用指南

這裏安利兩款我認爲開發中可以極大的提升生產力的工具，Charles 和 Postman。

P.S. Charles(查爾斯)。。不要再讀查理斯了，金剛狼中被老鐵扎心的博士就叫 Charles

P.P.S. 多圖慎點

二者的做用

首先，這兩個工具重疊的功能並很少，二者一塊兒使用效果絕對是1 + 1 > 2。

Postman

Postman 主要是用於模擬 http 請求，能夠很方便的測試各類METHOD的請求。
進階用法還可使用其進行一些自動化測試的操做，詳見使用 postman 進行自動化測試

Charles

Charles 則屬於一款代理工具，設置代理後即可以進行 http 請求的抓包，以及修改一些請求實際的內容來達到調試的目的。
主要是支持移動設備，跨設備調試神器

在平常中使用的順序

通常在開發過程當中，首先會經過Postman來進行接口的本地調試，驗證沒有問題之後則會進行代碼的部署。
部署完成後就可使用移動設備進行查看效果，這時爲了驗證接口的有效性，咱們就會用到Charles，設置代理並拿到移動設備訪問接口時的請求參數及返回值，進行驗證確保生產環境上接口正常。

若是是在生產環境上出現了問題，這時候就能夠先拿Charles抓包（也就是獲取接口的請求信息），在確認接口確實出現問題時，咱們如今就有兩種途徑能夠去 debug：

1. 使用Charles設置代理，將一個遠程服務器地址代理到本地服務進行調試
2. 使用Postman模擬當時生產環境的請求（從Charles中 copy header、query 之類的數據）

以上的操做都是很是直觀的，很是高效的，若是拋開這類工具不用，就靠人肉 debug，不知要額外耗費多少時間了。

Postman 的安裝與使用

Postman 是一款純免費的工具（固然，一個多人協做的功能是額外收費的），由 Electron 驅動的一款軟件。

官方網站：https://www.getpostman.com/
下載地址：https://www.getpostman.com/apps

此處略過下載&安裝的過程。
P.S. 新版推薦安裝獨立應用，而不是 Chrome 的插件

打開應用後的界面大概是這個樣子的：

首先是右側的內容主體，這裏包含了最基礎的幾個設置項。

• 指定請求的 Method
• 設置請求的 URL
• 添加請求時所攜帶的參數

在上邊的這幾項都設置完成後，點擊 Send 按鈕，即完成一個請求的發送了。
固然，若是在發送請求時想添加一些 Header 信息的話，直接在下邊編輯 Header 信息便可，界面相似 Params。

上圖中右上角能夠看到有一個 Cookies 按鈕，點擊後發現這裏保存的是在 Postman 中全部訪問的接口所返回的 cookie 信息，能夠一鍵添加到當前請求的 Header 中來。

在請求發送事後，就能夠在下邊看到請求相應的結果了。

• Body 表示響應的結果
• Cookies 爲服務端返回的 cookie
• Headers 是服務端返回的時所設置的各類頭信息（Content-Type、Status 以及 CORS 之類的信息都會在這裏）
• Test Results，是測試腳本執行的結果（若是有編寫的話，詳見以前寫過的使用 postman 進行自動化測試）

再下邊一行是返回數據的展現，默認會針對返回值的Content-Type進行自動格式化，三個按鈕能夠切換視圖（格式化、原始數據、預覽）
若是訪問的 http 請求返回爲 html 文件，則預覽狀態下展示相似瀏覽器，可是有些遺憾的是，頁面中的靜態資源引用必定要是絕對路徑，不能出現相似這樣的使用<link href="/XXX" />只能是<link href="http://XXX" />

用 Postman 還有一個很喜人的地方，若是你須要和其餘人進行接口的聯調，先在 Postman 中編寫好對應的格式嘗試發送請求，若是接口不符合預期的話，能夠點擊 Send 按鈕下邊的 code，將該次請求生成各類語言的實現，直接 copy 給對方，讓對方幫忙查看問題出在哪裏。

最左側的一欄，Collections，能夠理解爲是一個相似文件夾的存在，裏邊會包含多個 Request（也就是上邊寫的某一個請求）。
用於分組自動化測試，若是不使用自動化測試的話，單純的看成一個文件夾來看待也是沒有問題的。

Charles 的安裝與使用

這兩個工具的安裝都比較簡單，可是 Charles 在配置上會稍微複雜一些，畢竟要修改一些系統層面上的東西（否則無法抓包了）
Charles 是一個免費下載，可是使用收費的軟件固然網上大量的..破解方案，詳情諮詢度老師和谷老師

官方網站：https://www.charlesproxy.com/
下載地址：https://www.charlesproxy.com/download/latest-release/

安裝後的配置環節

可能就是大量的會在證書配置這裏卡殼，因此以爲 Charles 好麻煩，不想用；卻不知一次麻煩事後帶來的是怎樣的好處。

設置代理端口

設置路徑 Proxy -> Proxy Setting -> Proxies

安裝成功之後，首先咱們要設置代理所使用的端口號，通常來講都喜歡用8888
這個端口號是用來在遠程設備上鍊接你本機時使用的。
同一個頁面的其餘幾個選項卡，第一個是用來設置一些忽略的 IP、域名之類的，俗稱的白名單。以及針對 MacOS 和 Firefox 的一些特殊選項。

設置要代理的路徑

設置路徑 Proxy -> Proxy Setting -> SSL Proxying Settings

而後是設置 Charles 針對那些路徑的請求去進行代理相關的操做，是一個可配置的表格。
圖方便的話，能夠直接寫上:，前邊是 IP、域名，後邊是端口。*做爲通配符能夠匹配所有。

在本地安裝證書

設置路徑 Help -> SSL Proxying -> Install Charles Root Certificate

若是須要在本地進行一些抓包的操做的話，就須要在本地安裝信任證書了
若是是 Mac，在安裝完之後會自動跳轉到鑰匙串管理界面，右上角搜索 Charles 找到剛剛安裝的證書。
將其全部的權限設置爲始終信任便可。

至此，在電腦端的設置就已經結束了，接下來就是遠程設備的設置了，也就是咱們平時用的手機之類的。
首先，咱們要保證兩個設備處於同一個局域網下，而後設置手機設備上邊的代理信息。

以 iOS 舉例，設置路徑爲：
設置 -> 無線局域網 -> 點擊當前鏈接的 Wi-Fi 右側的感嘆號圖標 -> 滑動到底部找到 HTTP 代理，點擊進入 -> 設置服務器爲電腦端的 IP，端口爲咱們在上邊設置的那個端口便可。

此時，Charles 應該會彈出一個彈框提示有新設備接入，是否容許，點擊 Allow 便可。

可是，此時還沒完，咱們還須要安裝證書到手機端纔可以正常使用。

設置路徑 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser

點擊後，電腦上會有一個彈框，按照其說明找到彈框中的一個 URL，在手機瀏覽器中輸入便可（目前的版本是 chls.pro/ssl）。
P.S. 必定要保證手機是在連着本地代理的狀況下去訪問者個 URL

在 iOS 中會彈框提示你跳轉到設置中安裝描述文件，直接點擊安裝便可。

One more things，這個證書安裝完之後，依然沒有完成，咱們還須要在 iOS 設備商進一步設置纔可以使用。
此時咱們看到的 https 的結果依然是錯誤的：

設置路徑 設置 -> 通用 -> 關於本機 -> 證書信任設置（在最下邊） -> 找到咱們剛剛的 Charles，點擊 checkbox 徹底信任這個證書

如今就完成了在 iOS 上邊的設置了，能夠愉快的使用 Charles 進行抓包了。

實際使用中的一些功能

將網絡資源替換爲本地文件

在工做中，若是忽然有一個頁面出現了 bug，並且不可以在本地復現，此時懷疑問題出在 js 文件中。
但是這個文件是經過 webpack 之類的進行打包的，用 Charles 就能夠很好的進行 debug。
咱們可使用 Map Local 來將某些網絡資源替換爲本地的資源，就像上邊的，咱們能夠將線上壓縮後的 js 文件替換爲本地未壓縮（或者添加了 debug 邏輯的 js 文件）來進行調試。

設置路徑 Tools -> Map Local

好比咱們將百度的首頁替換爲一個本地簡單的頁面。
此時再經過手機進行訪問，獲得的就是咱們映射在本地的文件了。

將請求轉發到本地服務

上邊的是針對一些靜態資源文件進行的處理，但若是是一個接口出現了問題呢？
調用接口出錯了，可是並不知道爲何，因此咱們可使用另外一個功能，Map Remote，將一些請求轉發到本地服務器。
這樣無需去服務器上改代碼就可以調試了。

設置路徑 Tools -> Map Remote

幾點注意事項：

1. 某一項爲空，則表明匹配所有的
2. 若是是代理到本地服務器，Map to 裏邊的 protocol 必定要填成 http，否則 https 的請求轉發過來也會是 https
3. 若是在服務器中有用到 refer 字段的要注意了，這個 refer 的值會變成你在這裏配置的本地接口地址，例如 www.baidu.com 代理到 localhost:8000，實際得到的 refer 爲 localhost:8000，爲了解決這個問題，你須要勾選下邊的 Preserve Host header 來保證 Header 信息不會改變

修改請求的返回值

咱們能夠經過配置一些規則來改變某些接口的返回值。
好比咱們將一個 github 的接口中全部的 jiasm 修改成 jarvis。

設置路徑 Tools -> Rewrite

各類規則均可以配置，示例僅作了 Body 中的替換，其實修改 Header 什麼之類的也均可以作到的。

這樣咱們再訪問接口時的返回值就會產生變化：

BreakPoints

上邊的示例是在 Charles 中配置了一個規則，後續的全部訪問都會去執行這一段邏輯。
但若是僅僅是想修改一次接口的請求，還要去配置這個規則就顯得太麻煩了。
因此 Charles 還提供了另外一種方案，BreakPoints，用相似打斷點的方式，手動修改某一次請求的數據。

咱們在要打斷點的請求上右鍵調出菜單，而後找到 BreakPoints，點擊激活。

下次再訪問時就會自動跳轉到另外一個頁面進行設置。
第一次是修改 Request 的時候，因此咱們直接點擊 execute 執行。
等到下次再跳轉到這個頁面時則表示已經獲取到數據了，這時咱們再進行修改 Response。

Rewrite 是早於 BreakPoints 執行的，由於咱們能夠看到，name 已經被覆蓋爲了 jarvis
修改完成後點擊 Execute，這時候設備就接收到了咱們修改後的請求了。

以及一些其餘的小功能

1. 模擬弱網環境 Proxy -> Throttle Settings
2. 簡單的壓測 找到你要壓測的請求，右鍵找到 Repeat Advanced

更多例子請查閱官方文檔

小記

Postman 與 Charles 都是很是有助於提高開發效率的工具。 Postman 能夠模擬請求、進行簡易的自動化測試以及性能監控個。 Charles 能夠在本地快速的進行 debug，解決問題（以及也能夠作一些性能測試）。 但願你們可以善用工具，不要將本身的時間浪費到可被工具替代的事情上來。