（4）使用Charles实现页面代理

场景描述

---

在 Hybrid 开发中，我们难免会遇到以下问题：线上环境出现页面异常且抓包显示接口正常返回，基于生产包无法借助 Chrome inspect / Safari 等工具进行页面调试的前提，我们排查问题的难度会变得非常大。

解决方案

---

针对以上问题，我们可以借助以上 Charles 实现页面级别的代理，实现步骤如下：

第一步：设置网络代理

首先，将手机和电脑连入同一个网络。通过电脑的 系统偏好设置 -> 网络 查看电脑的 IP

手机进入wifi设置，点击修改网络就到如下界面，勾选“显示高级选项”，点击代理

点击代理后进入如下界面，服务器主机名处填写刚才查到的电脑的ip地址即可，服务器端口填写第一步中charles处设置的端口，默认是8888，如果做了修改，填写设置charles时修改的端口值。

点击保存，此时charles上会弹出一个对话框，点击allow即可。

第二步：设置Map Remote

点击 Tools -> Map Remote 打开相应的配置窗口；

在打开的窗口中，按上图进行相应配置，配置完以后点击OK即可。

第三步：修改本地代码查看效果

注意：修改本地代码后需要在APP内刷新当前页面，本地代码才会生效！！！

完成以上步骤以后，就可以在本地代码中添加一些错误捕捉代码和调试代码，通过页面的不同反馈排查出真正的问题。这个方法的优点就是随时改随时生效，不需要通过发布来查看每一次修改的效果！！！