使用Fiddler调试手机页面请求

从事前端开发的同学一定对Fiddler不陌生,它是一个非常强大的http(s)协议分析工具,如果你不知道它是什么,可以自行google一下,本文不再作科普,简单的说它可以代替Chrome开发人员工具中Network面板或Firefox的HttpWatch插件的功能。

官网地址:http://www.telerik.com/fiddler

我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工具来调试你的webapp,如果你需要查看在手机上打开页面时,所产生的http请求却又不知道怎么做,那就继续往下看。(当然,大部分情况下,你可以直接在电脑上用Chrome或Firefox模拟手机浏览器来看)

Fiddler支持代理的功能,也就是说你所有的http请求都可以通过它来转发,Fiddler代理默认使用端口8888,不知道的同学有可能因此无法使用翻墙,因为端口冲突。

利用这点,我们可以在手机端设置http代理为Fiddler的代理服务器,使得手机应用的请求都通过Fiddler来转发,从而实现查看手机端页面请求的功能。

首先我们打开Fiddler->Tools->Telerik Fiddler Options…在Connection面板里将Allow remote computers to connect勾选起来,确定后,关闭Fiddler并重新打开Fiddler。

2016-07-28_165958

此时,为了确保代理是正常工作的,我们可以在cmd里执行netstat -anop tcp查看Fiddler进程是否正常监听8888端口,如果服务没有正常开启,可以尝试使用其他端口,端口修改的位置,如上图位置。

fiddler_proxy

从上图我们看到,进程ID为8392的Fiddler正在监听8888端口,说明代理已经在工作了。那么接下来我们要把手机端的代理设置为Fiddler的代理,代理设置需要一个ip和一个端口,ip就是Fiddler所运行的电脑的局域网ip地址,端口默认是Fiddler代理的端口8888,请确保手机所在的网段可以访问到电脑所在的网段,同一个局域网里一般没什么问题。

2016-07-28_170405

正如我们所期望的,你可以开始调试你的手机端webapp请求了。

Fiddler 显示服务器IP和服务器信息

A.点击 Rules -> Custom Rules,编辑Fiddler的配置脚本
B.找到  static function Main() 
C.在方法最后加入几行代码,点击保存
// 显示服务器web环境
FiddlerObject.UI.lvSessions.AddBoundColumn("Server", 50, "@response.server");
// 显示服务器IP地址
FiddlerObject.UI.lvSessions.AddBoundColumn("HostIP", 50, "x-hostIP");
D.重启 Fiddler ,拖到滚动条,可以在显示结果的最后方看见服务器IP和应用服务器信息。

Fiddler 小tips

1、修改host及注释。
在菜单 tools 下点击 HOST.. 后进行配置。
例:

127.0.0.1 m.com
#172.1.0.1 m.com

#号为注释

2、修改网页返回值时遇到乱码的解决方法。
在对返回值进行修改前,即 AutoResponder 前,先在左侧选中网页后,在右侧找到 Inspectors 后,找到浅黄色提示条 Response body is encoded. Click to decode. 进行点击后。再将网址拖入后进行修改。

3、在监听的请求中查找指定的图片。例:? st.gif 找到包含st.gif的请求。

4、修改某个网页地址进入另外一个时,规则要使用 *redir:http://www.example.com 需不是 http://www.example.com 

更多功能请查阅文档:http://docs.telerik.com/