一、场景描述
在开发企业微信内置H5页面时，往往只有在开发后期上测试或者预发环境之后才能看到在手机端呈现的效果，不同于电脑浏览器中的H5页面，企微官方账号中配置的链接是固定不可改变的，并且手机浏览器也不支持一些配置代理的插件。因此想要在手机中实现前端代码使用电脑上跑的本地端口服务，接口使用预发环境或者测试环境的服务，则要借助电脑的Charles代理工具。
二、操作步骤
2.1 在电脑上安装好你的Charles
具体安装教程。
2.2 手机配置手动代理到Charles服务端口
·查看电脑的IP地址
Charles->Help->Local IP Adress
· 手机配置手动代理
配置手动代理的前提是，电脑和手机在同一个局域网下，一般情况，连接同一个wifi，或者在公司的网络下就可以。
点击连接wifi后的感叹号icon，进入配置页面：
点击选择配置代理（滑倒高级管理的列表底部）
选择手动代理，并在服务器选项输入电脑的IP地址，在端口号输入8888，然后点击存储。一般会弹出什么证书信任什么的，统统点确认信任就好了。
手机配置好代理之后，访问需要测试的页面，这个时候电脑上会出现确认弹框，点击确认之后电脑就可以代理手机的网络请求了。
· Charles上查看是否代理成功
配置好代理之后，手机上访问的请求都会显示在Charles的记录窗口里，查看是否代理成功。
2.3 Charles配置
手机成功代理到电脑上的Charles之后就可以在Charles上配置自己需要的应用场景了，下面展示常用的几个应用场景。
场景一：本地测试
描述：前端代码指向本地跑的服务，后端接口指向测试环境或者其他环境。
步骤一：判断你需要代理的网页结构
在charles的窗口里找到你的网页的请求，分析哪些是前端请求，哪些是后端接口。在示例的页面里，Idad目录下的是前端的代码，crm目录下则是后端的接口。
步骤二：配置Map Remote
Map remote功能可以重新配置链接指向的服务和端口，通过这个功能实现前后端指向不同的服务。具体操作可以通过Charles的工具栏中的Map Remote今天配置，但是当你找到你需要配置的请求时，直接在需要配置的节点（比如Idad）右键选择Map Remote就可以配置。
步骤三：前端请求指向本地2000端口
注意：在不配置代理的时候，只能看到html文件，但是实际上前端的html、css、js等文件都需要代理，因此我们需要在Idad下配置代理。
服务器配置localhost或者127.0.0.1
端口配置本地所跑服务的端口
路径这里需要注意，在from的路径中，需要在Idad后面加一个星号（*）表示这个路径下的所有请求，在to的path配置里这个星号就不需要了，不然代理后的请求都会多一个星号。
步骤四：后端请求指向正常的测试服务
如果是需要指到线上，这一步就不用配置，如果是需要调用测试或者预发的接口，可以使用switch host统一配置，也可以用步骤二的方法配置。
场景二：本地文件替换线上文件
描述：想替换线上的某个js文件或者css文件，或者图片，就可以使用Map Local的功能，将请求指向本地的文件。
三、总结
通过Charles代理手机进行配置的方法，可以在开发阶段就可以进行手机进行调试，有助于早期发现使用环境下才会出现的问题，很好的提高了开发和调试的效率。除此之外，Charles还可以通过配置代理，辅助其他的工具，实现更高效的开发调试流程。比如，可以直接将页面指向配置好的ff-dev页面，将代理配置放到ff-dev进行处理，更高效。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
