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

Posted 2020-07-13 Jasminecjc

背景介绍：

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，禁用它或选择“使用系统代理设置”