移動端調試是每一位前端工程師必須掌握的技能，在移動端環境上往往有很多不同的情況，我們需要借助一些工具來調試。本文將介紹 Mac 如何安裝 charles，進行抓包、以及一些應用場景。

場景一：app端內線上環境接口報錯，想看看請求數據是否有誤

場景二：微信環境內調用微信支付等，需要驗證域名(aaa.bbb.com)才能調試。改一行代碼我就發布上去?好麻煩啊。

場景三：app端內H5，調用jsBridge，和端上通信，本地開發環境壓根沒有這些jsBridge方法，那我改一行代碼我就發布上去？然后在端內調試？

常用調試工具

eruda/vConsole Weinre、spy-debugger 等

charles 抓包

下載charles

下載并且安裝charles并且打開

Mac 代理

1. Mac上安裝證書

安裝完成后，我們只能抓取 http 的網址，想要抓 https 的包需要安裝證書

點擊 Help -- SSL Proxying -- Install Charles Root Certificate

2. 信任證書

安裝成功后需要信任證書

3. 開啟Mac OS proxy

4. 把需要代理到域名添加到 SSL Proxying

5. 抓 https包 成功

6. 抓包無法成功？

閉電腦上 其他 網絡代理！！不關閉可能導致charles代理失敗

安卓手機 代理

1. 開啟工具

點擊 Help -- SSL Proxying -- Install Charles Root Certificate on a Mobile Device or Remote Browser

2. 手機連接Wi-Fi配置網絡代理

連接當前網段wifi，長按當前wifi-修改網絡-高級設置-代理手動-輸入ip地址和端口號

3. 在手機瀏覽器輸入 chls.pro/ssl 下載證書

4. 安裝證書

在手機系統設置中搜索憑據-點擊加密和憑據

點擊從存儲設備中安裝

選擇剛剛在瀏覽器中下載的證書

5.把需要代理到域名添加到 SSL Proxying

和Mac 設置SSL Proxying 步驟一致，

如果嫌單獨添加麻煩, Proxy —> SSL Proxying Settings 的配置地址，如果不想每個域名都設置一次，可以直接把 Host 和 Port 都設為 *，允許抓取所有域名的請求包

6. 至此安卓 抓包就可以成功了

手機上打開一個百度的鏈接，在charles的 structure 看看是否能抓到網絡請求。

用Map Remote 本地文件替換線上文件

總結

以上是生活随笔為你收集整理的charles代理手机调试_H5开发 移动端 调试之 Charles 抓包 和 Map Remote的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。