[微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程

[微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程

 

---

在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth、微信浏览器内打开,照样能看你源码~

---

使用fiddler来抓包

需要先做一些简单的准备工作:

• 一台带有无线网卡的PC或者笔记本电脑，然后将电脑和手机连接到同一个Wi-Fi网络中，并且保证二者是在同一个ip网段内的；

• 在电脑上安装 Fiddler;

• 打开Fiddler在菜单栏中点击 Tools - Fiddler Options - Connections 中按照如下配置后重启下fiddler：

很好理解,即允许远程设备使用本机联网.

好了,可以重启fiddler软件了,重启完毕后把软件最大窗口,不然你可能看不懂怎么没有找到那个该死的Online图标?在工具条的最右边,鼠标移到那个Online上,看图:(转载请注明出处:猿资猿味)

找到无线局域网内分配到本机的ip,上图是192.168.0.4.具体各位自行找到,不要找错了,确定后才能有用.

重点来了,掏出手机,打开手机的网络设置,把网络设置中的代理设置为192.168.0.4,端口号填8888.以IOS手机为例,"设置"->"Wi-Fi",看图,点那个"i":

找到"HTTP代理",选择"手动",填上电脑的IP(192.168.0.4)和端口(8888),看图:(转载请注明出处:猿资猿味)

好了,现在正常情况下用手机产生http请求的数据都会在电脑上的fiddler上显示出来了,如果不行请自行排查IP是否设错,或者是不是没有同处于一个局域网下,或者没有开启fiddler的允许远程用8888端口访问网络...这些个前提要确认好.

---

如果对方是https的怎么办?没问题,装个扩展插件:CertMaker for iOS and Android 步骤如下:

• 安装 CertMaker for iOS and Android 用来抓HTTPS的数据包；

• 打开Fiddler，点击菜单栏上的 Tools - Fiddler Options - HTTPS,勾选上Decrypt HTTPS traffic ，然后重启Fiddler；

• 打开手机，访问本机IP+8888，例如：192.168.0.4:8888, 点击 You can download the FiddlerRoot certificate 按照提示，在手机上安装证书，重启手机浏览器。

---

好了,https照样能抓了.接下来教大家如何看源码.

再装一个扩展:Syntax-Highlighting Add-Ons,下载地址都在上面那个地址里了,找一下就有了,安装上重启fiddler.

---

实战操作演练

https://open.weixin.qq.com
/connect/oauth2/authorize?appid=wx6f3020ce6c245df0&redirect_uri=http
%3A%2F
%2Fw.k189.cn%2Findex.php%2FHuoDong%2FFlowhongbao%2Findex&response_type=code&
amp;scope=snsapi_base&state=123&
connect_redirect=1#wechat_redirect 以这个活动为例,在电脑上是打不开的,但是在微信里面能打开,因为有
oauth2.0嘛.

在手机的微信中打开此链接,会在fiddler软件里显示全部http请求哦,看图:(转载请注明出处:猿资猿味)

这个看到了吧,就是那么简单,js,html,图片都会显示出来的,看源码可以说是不费吹灰之力,仿佛是和用Chrome浏览器F12看源码一样,哦呵呵呵~

双击上图圈出来的url,右侧会把详情显示出来,点"SyntaxView"且看下图:(转载请注明出处:猿资猿味)

这时你可能要叫起来了,艹艹艹擦哦,怎么是乱码?骚年,Don't worry.没看到上面还有句英文写着吗?翻译过来大概意思也就是说:"响应可能需要解码才能看,点我格式下他"(不要吐槽我的英文,只可意会不可言传).就是让你点它呗,点了你会发现,amazing!

好了,都是看得懂的东西了,我也就不废话了,其他的JS文件一样能看的,还帮你格式化过了.

---

其实呢,我等用fiddler工具用来抄袭别人的源码,是侮辱了这个工具的强大性,因为fiddler还能替换掉请求的某个加载文件,达到调试方便的目的,具体使用方法大家自行查阅相关资料.