Charles使用技巧

1 在线上环境中运行自己本地修改后的代码，即测试自己的代码

基础：

手机已经连上charles代理，能够抓取https或http包

场景：

一个项目的真实环境必须引用后端返回的模板或接口及其他部门的资源，如收银台资源。在本地运行后，只是死数据，不能进行真实购买或其他操作。

使用：

switchhost切换到你要使用的测试环境，便于进行测试。切换host文件

本地代码修改后，使用npm run build 指令会生成dist文件夹，文件夹里有js文件和css文件，这两个文件夹里的内容就是你要在线上环境运行的内容。

打开手机app，进入到你要进行测试的项目即页面，Chares会抓取到此页面需要加载的包或资源，有包的加载js资源的，有包是加载css资源的，打开层叠的js包，最里层会有几个后缀是.js的文件，这个js文件和dist文件中js文件名称是一一对应的，在charles中选中这个js文件后，右键，选择map-local选项，会弹出弹窗，弹出后，在弹窗的最后一项Map To中的local path，选中dist文件夹中名称对应的文件，确定。把js文件和css文件都maplocal成本地的后。在清除手机app缓存，重新进入测试页面，就会运行本地修改后的文件。

缓存问题：

手机经常有缓存问题，在一次map-local后，你修改文件，重新build后，但是手机仍然走的上一次的缓存，即上一次build文件中的内容。有的app清理缓存非常麻烦，你就可以采用此方法。手机在走缓存时，仍然会有一个走缓存的包，charles抓取后，你选中缓存包，邮件save，保存为html文件。然后你在选中此包，邮件map-local选中你刚保存的html文件。此html文件中有link连接和script连接，这几个连接是对应你生成的dist文件文件夹中内容的，你在与你dist文件夹中css文件和js文件有关的标签的src的路径后加上？v=1，在进入页面就会进入到新的build后的内容。你要再次修改你的内容后，就可以build后修改v=后的数字，它就会不走缓存，进入到新的修改后的包。

2 修改后端的模板文件，在本地修改后，测试成功后，再给后端部署

基础：

手机已经连上charles代理，能够抓取https或http包

场景：

在后端部署的html文件，里面有一些需要在特定环境下加载的资源，前端修改后，后端部署才可以看见效果，比较麻烦。并且不知道页面地址，只可以通过正常流程进入。

使用：

在测试环境中，手机端或者pc端通过正常操作进入到后端部署的文件，Charles会抓取到这个包，选中此包，右键save保存成html文件，在右键此包，map-local选中刚才下载的文件。想进行修改，就打开保存的html文件，进行自己代码的编写，后保存，再刷新，就会运行自己编写的代码，进而进行测试。