[微信开发利器]微信内移动前端开发抓包调试工具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&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还能替换掉请求的某个加载文件,达到调试方便的目的,具体使用方法大家自行查阅相关资料.

话又说回来,中国的网民和用户，不管你的内容来自哪里，他们只管有没有得到我想要的东西。所以“原创”这个东西……此段摘自卢松松的感慨