Charles与weinre结合的移动端调试

相当长一段时间内我都是用Charles+Chrome来调试Web页面的，用到Charles是因为它有比较特别的映射功能：Map Remote和Map Local，有了映射功能，我就可以在不影响线上代码的情况下进行修改调试。

如果在Charles中勾选了Map Local并设定规则，Charles就可以按照规则，把请求的对应目录（或文件）映射成本地的目录（或文件）。类似地，如果勾选了Map Remote并设定规则，就会映射成远程的目录或者文件。如果你还没用过这神奇的功能，可以去看看这里：Charles Map Local功能实现接口本地调试，它详细介绍了实现Map Local的操作步骤，类似的Map Remote也大同小异。

转移到移动端后，电脑上的Chrome就不能好好利用了，好在有weinre这个工具，可以实现远程调试。这里我是以微信web开发者工具为例，毕竟它也是基于weinre修改的。

看一下微信web开发者工具的移动调试步骤，就可以知道weinre是基于网络代理的。

现在问题就来了，weinre是基于代理的，Charles也是基于代理的，如果我既想要weinre的远程调试功能，又想要Charles的映射功能，这两个代理搅和在一起，该怎么办才好？

显然，如果这两个代理如果能嵌套就好办了，即手机Web先走Charles代理，然后Charles再走weinre的代理，鱼和熊掌不就兼得了？

很幸运的是，Charles提供了嵌套代理的功能，在Charles里面它被称为外部代理(External Proxy)。设置入口是在菜单上的Proxy——External Proxy Settings。勾选下图中的Web Proxy，设置Web Proxy Server为127.0.0.1，端口设置为weinre的代理端口，如此操作之后，weinre代理就成了Charles的外部代理，weinre远程调试与Charles映射兼得，经测试，非常成功！

externalproxy.png

关于Charles的更多功能，你可以去这里挖掘：Charles 使用笔记 | FuChee's blog

参考：

• 打造最舒适的webview调试环境 · Issue #11 · riskers/blog
• Charles 使用笔记 | FuChee's blog
• 移动网页真机调试之Weinre | I'M Duran