一、 安裝Charles
去 Charles 的官方網(wǎng)站（http://www.charlesproxy.com）下載最新版的 Charles 安裝包蹭睡，是一個 dmg 后綴的文件歧匈。打開后將 Charles 拖到 Application 目錄下即完成安裝撩炊。
二控乾、將 Charles 設置成系統(tǒng)代理
Charles 是通過將自己設置成代理服務器來完成封包截取的真椿，所以使用 Charles 的第一步是將其設置成系統(tǒng)的代理服務器。
啟動 Charles 后干厚，第一次 Charles 會請求你給它設置系統(tǒng)代理的權限答恶。你可以輸入登錄密碼授予 Charles 該權限。你也可以忽略該請求萍诱，然后在需要將 Charles 設置成系統(tǒng)代理時，選擇菜單中的 “Proxy” -> “Mac OS X Proxy” 來將 Charles 設置成系統(tǒng)代理
三污呼、 截取 Https 通訊信息
安裝證書：
如果你需要截取分析 Https 協(xié)議相關的內(nèi)容裕坊。那么需要安裝 Charles 的 CA 證書。具體步驟如下燕酷。
首先我們需要在 Mac 電腦上安裝證書籍凝。點擊 Charles 的頂部菜單周瞎，選擇 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate”，如圖：
四饵蒂、設置Map Remote
注意一些細節(jié):
- 默認端口為80一般不需要填
- 設置完以后看Charles界面的提示声诸，如果提示“Notes SSL Proxying not enabled for this host. Enable in the Proxy Menu, SSL Proxying Settings”， 按照提示將對應的遠程域名添加到SSL Proxying Settings中即可退盯。
關于Charles的設置還可以參考： https://zhuanlan.zhihu.com/p/36160972
五彼乌、瀏覽器設置
注意需要將Chrome設置為使用系統(tǒng)代理，否則Charles無法截取Chrome的網(wǎng)絡請求
五渊迁、本地服務
線上服務一般多是https模式慰照，本地前端服務也需要改成https的方式，在webpack devServer中設置https: true即可開啟https服務琉朽，然后瀏覽器中訪問的時候在Chrome的開發(fā)工具中設置對默認證書信任即可毒租。
