在朋友圈看到一款疯转的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使用教程的更多相关文章

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

    [微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程   在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth.微信浏览器内打开, ...

  2. 开发抓包工具 Mac charles 3.11.5 破解版 安装包

    摘要 在发开过程中,追踪请求和监控请求与返回数据是我们经常会需要的一个需求,在Mac端,Charles是一款非常易用的抓包工具. 一.简介 Charles是Mac端的一款截取与分析网络请求的工具,在网 ...

  3. 抓包工具Fiddler使用教程

    一.基本原理 Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888 二.Fiddler抓取https设置 1.启动Fiddler,打开菜单栏中的 Too ...

  4. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  5. *** wechat-php-sdk 微信公众平台php开发包

    wechat-php-sdk 微信公众平台php开发包,细化各项接口操作,支持链式调用,欢迎Fork此项目weixin developer SDK. 项目地址:https://github.com/d ...

  6. 微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]

    原文地址:  http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...

  7. 微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记

    微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView) ...

  8. 2017年05月10日记一次微项目投产 | 安卓版微信内置浏览器不能解析gzip压缩过的mp4视频的问题

    前言 今天投产了一个小项目,一个很简单的H5,有播放视频功能,使用了videojs插件. 之前也做过数个视频播放,视频的转压都按照既定流程进行,文件放到FTP后,iphone和安卓机测试下来都没有问题 ...

  9. 微信开发系列——微信订阅号前端开发利器:WeUI

    前言:年前的两个星期,学习了下微信公众号的开发.后端基本能够基于盛派的第三方sdk能搞定大部分事宜.剩下的就是前端了,关于手机端的浏览器的兼容性,一直是博主的一块心病,因为博主一直专注于bootstr ...

随机推荐

  1. 【转】【漫画解读】HDFS存储原理

    根据Maneesh Varshney的漫画改编,以简洁易懂的漫画形式讲解HDFS存储机制与运行原理. 一.角色出演 如上图所示,HDFS存储相关角色与功能如下: Client:客户端,系统使用者,调用 ...

  2. oracle常见错误类型

    http://www.cnblogs.com/whyhappy/p/6232258.html

  3. VM虚拟机下CentOS 6.5配置IP地址的三种方法

    1.自动获取IP地址 虚拟机使用桥接模式,相当于连接到物理机的网络里,物理机网络有DHCP服务器自动分配IP地址. #dhclient 自动获取ip地址命令 #ifconfig 查询系统里网卡信息,i ...

  4. WebService 通用接收方法

    /** * @Title: getNetStatusRequest * @Description: TODO(2.1检查网络状态字符串) * @param: * @return: String * @ ...

  5. 从决策树学习谈到贝叶斯分类算法、EM、HMM

    从决策树学习谈到贝叶斯分类算法.EM.HMM                (Machine Learning & Recommend Search交流新群:172114338) 引言 log ...

  6. C# 之 抽象类与接口

    抽象类 C#同意把类和方法声明为abstract,即抽象类和抽象方法.抽象类通常代表一个抽象概念,它提供一个继承的出发点,当设计一个新的对象类时,一定是用来继承的,所以,在一个以继承关系形成的等级结构 ...

  7. Jackson的Json转换

    public class JacksonJsonUtil { private static ObjectMapper mapper; /** * 获取ObjectMapper实例 * @param c ...

  8. CSS布局方案之圣杯布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. (ZZ)WPF经典编程模式-MVVM示例讲解

    http://www.cnblogs.com/xjxz/archive/2012/11/14/WPF.html 本篇从两个方面来讨论MVVM模式: MVVM理论知识 MVVM示例讲解 一,MVVM理论 ...

  10. A - Next_permutation

    首先介绍一下next_permutation函数的用途! 按照STL文档的描述,next_permutation函数将按字母表顺序生成给定序列的下一个较大的排列,直到整个序列为降序为止. prev_p ...