fiddler+willow使用和配合真机测试调试

本文最先发布于csdn

背景介绍：

Fiddler是一个http协议调试代理工具，它可以记录并检查全部你的电脑和互联网之间的http通信，设置断点，查看全部的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些均可以让你胡乱修改的意思）。 Fiddler 要比其余的网络调试器要更加简单，由于它不只仅暴露http通信还提供了一个用户友好的格式。Fiddler是用C#写出来的,它包含一个简单却功能强大的基于JScript.NET事件脚本子系统，它的灵活性很是棒，能够支持众多的http调试任务，而且可以使用.net框架语言进行扩展。

注：Fiddler由于设置代理的缘由，在使用中可能会出现网络问题，直接关闭或者点击关掉左下角的capture就行了

Fiddler及Willow插件的安装

Fiddler有两个版本，下载地址 http://www.telerik.com/download/fiddler ，针对Fiddler2和Fiddler4，对应的Willow插件版本也是不同的。本文使用和针对的主要是Fiddler4

官网介绍的主要功能以下：

• Web调试，调试PC、Mac或Linux系统和移动设备的通讯。确保适当的cookies,headers和缓存指令是客户端和服务器之间传输。支持任何框架,包括.NET,Java,Ruby等等。

• 性能测试，Fiddler让你一眼就看到加载页面权重-请求的数量和传输的字节，http缓存和压缩技术。也能够用Fiddler的自定义规则来关注潜在的性能问题.好比,你能够标记全部大于25KB的响应(Fiddler4要安装Fiddeler script)

• HTTP/HTTPS流量监控，Fiddler是一个免费的web调试代理，记录了全部在你的电脑和互联网之间的HTTP(s)的流量，能够用它来调试几乎任何支持代理的应用程序好比IE，Chrome，Safari等

• Web会话操做，容易操做和编辑web会话。你所须要作的就是设置一个暂停正在处理的会话和容许变动的请求/响应的断点。你也能够在Fiddler中编写本身的HTTP请求(也就是伪造请求)

• 安全性测试，使用Fiddler对你的web应用程序进行安全性测试——解密HTTPS流量，用man-in-the-middler解密技显示和修改请求。能够配置Fiddler解码全部流量或者特定会话的流量

• 定制Fiddler，受益于丰富的扩展模型,从简单的FiddlerScript到强大的扩展,可使用任何.net语言来扩展，点击查看已有的扩展。

Fiddler原理：

在本机开启一个http的代理服务器，而后它会转发全部的http请求和响应到最终的服务器,如图所示

打开Fiddler后，Fiddler会自动篡改代理，打开ie的internet选项->链接->局域网设置->高级能够看到下图

经过更改浏览器的代理服务地址，Fiddler就能够截获全部发出的请求

Fiddler两种代理模式

流模式：（streaming） 实时传送给客户端（更接近于浏览器自己真实的行为）
缓冲模式： （buffering） 等http请求全部东西都准备好后才返回给应用程序（可控制最后的服务器响应）
在Fiddler的工具栏的Stream能够进行两种模式的切换，默认是缓冲模式

Fiddler使用场景

• 开发环境host配置，Tools->Hosts

• 先后端接口调试

• 线上bugfix，将线上项目代理到本地进行修改调试(AutoResponder,Willow)

• 性能分析和优化

工具栏经常使用功能介绍

• Replay，回放会话，选中会话并按R键便可回放会话（可多条）

• 清空监控面板，快捷键ctrl+x

• go 断点调试

• stream切换代理模式

• Decode 解压请求

• keep all session选项可选保存会话的数量，默认的保存全部，保存的会话越多，fiddler占用的内存越大，能够设置下，并且调试也不但愿看到太多会话，能够根据须要清空监控面板或过滤请求

• All Process，能够用来控制如只捕获chrome浏览器的请求

• Find 能够查找会话并选择颜色高亮标明

• TextWizard 解码/编码功能，可选选项不少，避免去网上找解码工具
  

状态栏

状态栏功能较少，但也很重要

Capture用来控制Fiddler是否工做，点击便可切换状态
All Process控制请求来源
旁边的数字表明当前会话数量

命令行

• select命令。选择全部相应类型（指content-type）为指定类型的HTTP请求，如选择图片，使用命令select image.而select css则能够选择全部相应类型为css的请求，select html则选择全部响应为HTML的请求，选中的部分会高亮显示，如图执行select image
  

• allbut命令。
  allbut命令用于选择给定类型的HTTP请求(删除其余类型请求)，该命令还有一个别名keeponly.

  Eg:只保留image会话：allbut image

• ?text命令
  选择全部 URL 匹配问号后的字符的所有 session

  Eg:?qq.com

• 小于/大于size命令
  选择响应大小大于某个大小或者小于某个大小的全部HTTP请求

  Eg:选择响应大小小于10k的请求：<10k

• =status命令
  选择响应状态等于给定状态的全部HTTP请求。

  Eg:选择全部状态为200的HTTP请求：=200

• @host命令
  选择包含指定 HOST 的所有 HTTP请求。

  Eg：选择全部host包含csdn.net的请求：@csdn.net

• Bpafter， Bps, bpv, bpm, bpu

  这几个命令主要用于批量设置断点
  
  Bpafter xxx: 中断 URL 包含指定字符的所有 session 响应
  
  Bps xxx: 中断 HTTP 响应状态为指定字符的所有 session 响应。
  
  Bpv xxx: 中断指定请求方式的所有 session 响应
  
  Bpm xxx: 中断指定请求方式的所有 session 响应。等同于bpv xxx
  
  Bpu xxx:与bpafter相似。
  
  当这些命令没有加参数时，会清空全部设置了断点的HTTP请求。

• help
  输入help会弹出这个页面 http://docs.telerik.com/fiddler/knowledgebase/quickexec，是fiddler的官方命令行文档

会话图标类型（此图为Fiddler2）

右侧窗口功能

• Stastics：统计选中的一个或多个请求相关数据，大小、耗时
  

  最下方会有一个不太容易发现的功能show charts，点击会对请求进行可视化处理，如图

  

• Inspectors：多种方式查看Request或者Response的详细消息,如图：
  

• AutoResponder： 设置一些规则将符合规则的请求重定向到本地。
  

• Composer：建立发送HTTP请求/先后端接口联调
  

• Filters：设置会话过滤规则
  

• Log：日志

• Timeline：性能优化和分析

• Willow的使用：请求重定向（模拟响应）

  右键添加项目，规则，host

  

  注意：Match中的URL必须以"/"结尾，Action中的URL必须以"\"结尾
  其余使用：

  

Fiddeler+Willow+全民wifi 配合真机调试

1. 确保fiddler相关选项勾选以下，tools->fiddler options ->connections
   

这里默认的只会抓取HTTP请求包，若是也要抓取HTTPS包，则在HTTPS标签栏里设置，把Capture HTTPS CONNECTs选项    勾上。

2.确保capture开启，个人fiddler有时候会出现这种状况

此时capture会关闭，须要点击黄色区域才能从新开启capture，否则没法抓到请求

3.手机和电脑链接在同一个局域网中，全民wifi插入电脑USB口（我用过360随身wifi等其余设备，由于公司网络设置的缘由都不行）。若是是第一次使用全民wifi，会有提示下载驱动，成功安装驱动后会在电脑右下角提示安装成功和开始体验。电脑右下角出现全民wifi图标，能够经过手机扫描二维码或者在手机端wifi设置里面直接输入账号密码来链接共享pc网络，接着配置代理，通常fiddler默认的端口是8888，若有不一样能够在connection中查看，配置主机名，两种方法：

方法一：windows下是win+r  运行cmd  接着运行ipconfig
![](http://7xteia.com1.z0.glb.clouddn.com/4.png)
方法二：鼠标移上fiddler右上角的online会出现提示以下：
![](http://7xteia.com1.z0.glb.clouddn.com/5.png)

4.建立重定向规则，若是文件较少，能够用fiddler自带的AutoResponsder,若是是文件夹，就用willow添加，由于手q使用了离线包机制吗，因此willow要配置host禁用离线包并在手机端清除qq缓存，右键会出现添加项目规则host等的工具栏

配置host如图

5.开始抓包，打开项目对应的区域，抓到的请求在fiddler里面会是橙色区域如图

即表明抓包成功，有时候会出现404或者代码报错，因此通常要先在浏览器端测试观察控制台有没有报错
若是发现404，多是由于使用了不一样的域名，也要进行添加规则和匹配

6.浏览器端的调试以下：
复制抓到的请求地址，在浏览器端打开便可，若是要调试一个项目下另外的业务，更改url结构便可

我遇到过由于须要看外网的状况关闭了手机的代理后再开结果没法抓包的问题，重启手机就行了，有时候请求不少有不少不想看的请求须要观察当前的业务时，能够设置filter

过滤掉请求后点击action选择run filterset now便可生效

7.清空面板方法以下：
方法一：在命令窗口里输入clear便可
方法二：上方有移除请求的选项
点击会有不少选项，能够移除全部请求，移除img请求和移除请求码为非200的等等，根据实际须要选择不一样选项
方法三：清除全部记录的快捷键：ctrl+x

通常调试的时候都要禁用缓存
在fiddler2里是Tools->Performance->Disable Caching,在fiddler4里是Rules->Performance->Disable Caching

Fiddler的高级使用

网速限速

咱们为何要限速。限速对于web前端研发是很是重要的，因为开发者的机器通常配置都很高，而且是在localhost下来调试程序，因此很难模拟到用户的真实使用情 况，如正在下载JS,css等静态资源的时候，页面的一个渲染状况。当网速很慢的时候，咱们更但愿看到的是先渲染出用户界面，而不是让用户看到一片空白。那么这个时候，网络限速就能很方便在localhost针对相似的状况来作性能调试与优化。

方法一：Fiddler script（自定义延时）
须要的插件：Fiddler script，下载地址：http://www.telerik.com/download/fiddler/fiddlerscript-editor
下载完直接安装就好了，安装以前必须关闭fiddler，再打开fiddler就会在右侧tab看到fiddler script选项
fiddler script原理：把请求彻底代码化
Eg：模拟延时3s发送请求：
选中会话，在fiddler-script——>Go to->OnBeforeRequest添加代码以下：
oSession["request-trickle-delay"] = "3000"

点击save script保存，再replay会话就会发现会话延迟了三秒才发送
延时响应同理

方法二：
Rules → Performances → Simulate Modem Speeds

Fiddler替换HTTP Request Host
替换的方法有两种，一种是暂时的，一种是永久的，暂时的方法是在Fiddler 左下角输入：

urlreplace www.demo.com www.dev.demo.com

要清除转发，请在同一位置输入：

urlreplace

按Enter 就能够了。

更详细的说明请参考Fiddler官方说明文件- QuickExec Reference 。 能够发现urlreplace 作的是整个网址字串的取代，因此能够动手脚的地方不仅于此。

永久的方法是修改Fiddler的CustomRules.js ，注意是.js ！ 点下Fiddler 上方的Rules ，再点Customize Rules ：

若是有安装FiddlerScript Editor ，会用FiddlerScript Editor开启CustomRules.js ，不然会用笔记本开启。 或者也能够到「个人文件 Fiddler2 Scripts 」直接编辑CustomRules.js 。

//请先在CustomRules.js 找到：
  static function OnBeforeRequest ( oSession : Session ) {
   // ...
   //在函式中加入：
  if ( oSession . HostnameIs ( 'www.demo.com' ) )
   oSession . hostname = 'www.dev.demo.com' ;
 }

将CustomRules.js 存档， Fiddler 会自动从新载入CustomRules.js ，原先发到www.demo.com 的HTTP Request 就会自动转发到www.dev.demo.com 。
更详细的说明请参考Fiddler官方说明文件- Script Samples 。

Fiddler断点调试

设置断点有两种方法
第一种：打开Fiddler 点击Rules-> Automatic Breakpoint ->Before Requests(这种方法会中断全部的会话)
如何消除命令呢？ 点击Rules-> Automatic Breakpoint ->Disabled

第二种: 在命令行中输入命令: bpu www.baidu.com (这种方法只会中断www.baidu.com)

如何消除命令呢？ 在命令行中输入命令 bpu

看个实例，模拟QQ邮箱的登陆，输入错误的用户名和密码，用Fiddler中断会话，修改为正确的用户名密码。这样就能成功登陆

1. 登陆qq邮箱，输入错误的密码

2. 打开Fiddler, 在命令行中输入bpu

3. 输入错误的用户名和密码 点击登陆

4. Fiddler 能中断此次会话，选择被中断的会话，点击Inspectors tab下的WebForms tab 修改用户名密码，而后点击Run to Completion。

5. 结果是正确地登陆了qq邮箱

禁用缓存

两种方法，一种暂时的，一种永久的（经过fiddler script）
暂时的方法：
Tools->Performance->Disable Caching

永久的方法：
在fiddler script里查找
> var m_DisableCaching: boolean = false;

把值改为true并保存就能够了

扩展Fiddler script的一些用法

实例 让全部qq的会话都显示红色。

把这段脚本放在OnBeforeRequest(oSession: Session) 方法下，而且点击"Save script"

if (oSession.HostnameIs("www.cnblogs.com")) {
            oSession["ui-color"] = "red";
    }

效果如图

这样全部的cnblogs的会话都会显示红色

如何在Fiddler Script中修改Cookie

cookie其实就是request 中的一个header.

// 删除全部的cookie

oSession.oRequest.headers.Remove("Cookie");

// 新建cookie
oSession.oRequest.headers.Add("Cookie", "username=testname;testpassword=P@ssword1");

注意: Fiddler script不能直接删除或者编辑单独的一个cookie， 你须要用replace方法或者正则表达式的方法去操做cookie的string

复制代码

static function OnBeforeRequest(oSession: Session) 
{ 
     if (oSession.HostnameIs('www.example.com') && 
          oSession.uriContains('pagewithCookie') && 
oSession.oRequest.headers.Contains("Cookie")) 
     { 

     var sCookie = oSession.oRequest["Cookie"]; 

     //  用replace方法或者正则表达式的方法去操做cookie的string
     sCookie = sCookie.Replace("cookieName=", "ignoreme="); 

     oSession.oRequest["Cookie"] = sCookie; 
    }

一点小的tips：

• 我在使用Fiddler的过程当中碰到过没法抓包的状况，缘由是以前由于测试配置了autoresponder或者filter等没有改回去，若是碰到这个状况请确保Fiddler的选项都配置正确

• chrome和firefox浏览器没法被监听
  fiddler安装以后，默认会在IE浏览器中安装一个fiddler的插件，因此它对IE及国内基于IE内核的各种浏览器都能实现监听，但其余内核的浏览器没法被监听。

  解决办法：禁用chrome和firefox中具备代理功能的插件，好比chrome若是安装了switchSharp，禁用它或选择“使用系统代理设置”，或在switchSharp中新配置一个代理项（好比名为fiddler，用于指向代理127.0.0.1，端口8888，以下图），便可实现监听。