代理工具做微信项目的调试配置

为啥子要用代理工具

代理工具就是个普普通通的抓包工具，客户端的所有请求都会先经过代理，再转发到响应的服务器，反之，服务器的所有响应，都会先经过代理，再发送到客户端。 ![enter description here][1] 代理工具有很多种，有些可以针对特定的HTTP请求，分析请求数据，设置断点，调试web应用，修改请求数据等功能... 别的功能不说，主要针对微信项目中的测试，需要用到修改域名的功能。当然，你也可以直接改 HOST 文件的指向。你要是腻害我也不拦你。 总的来说，如果不用，略显平庸。

代理工具

Fiddler

Fiddler 是名副其实的长期受宠度极高的代理软件。这年头作为前端工程师，不懂点 fiddler 都不好意思说自己会 debug。

windows 下安装 Fiddler

步骤一, 去官网，下载exe; ![enter description here][2] 步骤二，运行exe，这个还要我教？！![enter description here][3]

mac 下安装 Fiddler

相比之下，mac 下的安装稍显复杂 ![enter description here][4]

Charles

Fiddler 在 mac 上的用户体验不太佳，这里介绍另外一种，叫 charles, 有人称之为千花瓷，原因如图， ![enter description here][5] 还挺中国风的 ![enter description here][6] charles 在界面上毫无疑问是要比 Fiddler 更胜一筹 ![enter description here][7] 但功能上确实不如Fiddler强大，不过如果仅仅是微信调试，也是够用的。 它同样有window版本和mac版本，唯一一点让人讨厌的是竟然要收费。 不过，毛主席曾说过：哪里有压迫，哪里就有反抗 ![enter description here][8]

设置浏览器代理

步骤一，找到设置代理的地方 以 Chrome 为例，菜单 -> 设置 -> 高级 -> 代理设置 其他浏览器也是大同小异，耐心找一下，总能找得到。 ![enter description here][9] 步骤二，设置网页代理服务器为 127.0.0.1 端口8888 windows版 ![windows版][10] mac版 ![mac版][11] 如果使用微信开发者工具，还需要在工具内设置代理 ![微信开发者工具][12]

使用代理修改域名

比如，我本地开了服务 http://10.0.0.88:6605/ 由于跳转到微信授权登录，无法访问，还报错，报错原因是 redirect_uri 的域名并没有在后台配置过，所以按理来说，不能访问。访问线上地址 http://weixin.50miji.com/#/ 就正常。 ![enter description here][13] ![enter description here][14] 此时此刻，悲痛欲绝，难道我每次都要 push 上服务器上，才能看到修改后的效果吗![enter description here][15] NO，NO，NO，跟着我的步骤，慢慢来![enter description here][16]

charles 代理工具

找到代理工具中捕获到的对应的线上域名地址，这里是 http://weixin.50miji.com/#/ ，选择 map remote ![enter description here][17] 在 Map To 的区域里面，填本地的对应的服务地址，例如： ![enter description here][18]

fiddler 代理工具

菜单 -> Tools -> HOST ![enter description here][19]

修改本地文件查看效果

我把本地的文件改一改 ![enter description here][20] 刷新一下，咔嚓，![enter description here][21]看到效果了 ![enter description here][22] PS：（Charles）在项目中遇到较多的一个问题是前端与后台API的域名都是一样的，那么在使用代理替换的时候，本来只是打算替换线上的页面，但是无意中也把页面请求的API也替换了，导致请求路径也变成请求本地的某个路径，但因为本地没有该路径所以发生异常。 如丰收无忧项目 页面：http://wx.fengshouwuyou.com/#/App/Index API：http://wx.fengshouwuyou.com/api/customer/banner/getAll 这时候就不能用统一替换HOST的方式处理了 解决的就是 wx.fengshouwuyou.com => 替换成本地的地址 wx.fengshouwuyou.com 带路径/api/*的 => 不替换或者替换成线上的地址或者替换成IP+端口 ![enter description here][23] ![enter description here][24]

手机设置代理

在与代理同一wifi环境下，修改网络，选择代理 ![enter description here][25] 输入代理服务器与端口，如 10.0.0.88 8888 ![enter description here][26] 那么在手机上也可以看到本地的修改啦！ 如果还有什么疑问，或者挖掘了代理的其他功能，咱们擂台上见！![enter description here][27] [1]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503065651376.jpg [2]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503112904294.jpg [3]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503112711364.jpg [4]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503113039696.jpg [5]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503114344647.jpg [6]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503114240012.jpg [7]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503114509940.jpg [8]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503114796437.jpg [9]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503113461830.jpg [10]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503113541842.jpg [11]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503113584559.jpg [12]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503113956025.jpg [13]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503115291918.jpg [14]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503115152133.jpg [15]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503116120469.jpg [16]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503116615140.jpg [17]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503116211603.jpg [18]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503116261332.jpg [19]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503117518518.jpg [20]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503116379743.jpg [21]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503116554013.jpg [22]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503116574180.jpg [23]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1507715598636.jpg [24]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1507715620595.jpg [25]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503119827693.jpg [26]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503119842657.jpg [27]: http://image.talkmoney.cn/%E5%B0%8F%E4%B9%A6%E5%8C%A0/1503119492666.jpg

作者简介：李尧晖，芦苇科技web前端开发工程师，代表作品：飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和我们一起并肩作战： web@talkmoney.cn 访问 www.talkmoney.cn 了解更多