美文网首页
Charles与weinre结合的移动端调试

Charles与weinre结合的移动端调试

作者: 千若逸 | 来源:发表于2017-01-23 18:13 被阅读191次

相当长一段时间内我都是用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

参考:

相关文章

  • Charles与weinre结合的移动端调试

    相当长一段时间内我都是用Charles+Chrome来调试Web页面的,用到Charles是因为它有比较特别的映射...

  • Charles 移动应用抓包调试工具的初步使用与了解

    Charles 简介 Charles 是一款移动端调试抓包工具。用于移动端开发或测试时调试与服务器端的网络通讯协议...

  • 移动端调试——weinre

    安装 npm install -g weinre 启动 weinre --httpPort 8888 --boun...

  • weinre 调试移动端

    weinre 安装 npm install weinre -g weinre 三大服务 1.调试服务器(Debug...

  • Charles教程-抓包

    Charles 简介 Charles 是在 PC 端常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端...

  • Charles的集成

    Charles简介 Charles 是在 Mac 下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端...

  • Charles 使用(-)

    1.什么是Charles Charles是在MAC下常用的网络封包截取工具,在做移动开发时,是为了调试与服务端的网...

  • Charles抓包工具简介

    1、工具介绍 Charles是一款在Mac下常用的数据包截取工具,在做移动开发时,为了调试移动端与服务端的网络通讯...

  • 为了学会 Charles,我拼命了

    简介 Charles 是在 PC 端常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,...

  • Charles使用

    Charles 简介 Charles 是在 Mac 下常用的网络封包截取工具,在做 移动开发时,我们为了调试与服务...

网友评论

      本文标题:Charles与weinre结合的移动端调试

      本文链接:https://www.haomeiwen.com/subject/jhiabttx.html