Fiddler抓包实用技巧及常见问题🎉😶‍🌫️

Ytiona
4,482 阅读8分钟

Fidder是一个稳定免费的抓包工具，提供了非常多的实用功能。

界面介绍

界面介绍.png

工具栏依次为

  1. windows有些应用可能无法捕获，可以尝试修改这个配置；
  2. 给请求添加备注
  3. 回放，重新请求，快捷键R
  4. 清空面板，可以分类型清空
  5. GO，请求断点继续（请求断点：状态栏第三列点击，切换断点模式，上箭头：发送时，下箭头：响应时）
  6. Stream，代理模式，是否开启流模式，不开启是缓冲模式(全部响应时才显示出来)
  7. Decode，解压http请求
  8. Keep session，保存会话数量，越多占用内存越多
  9. Any process，只看哪个进程的请求，拖动到对应进程的窗口上，松开
  10. Save，保存会话，下次可以通过file-load archive加载查看
  11. 截图
  12. 计时
  13. 将当前请求在浏览器中打开
  14. clear cache，清除ie浏览器缓存
  15. TextWizard，解码编码工具，base64、sha256等等
  16. Tearoff，分离右侧面板
  17. MSDN搜索，没啥用

监控面板

监控面板可以看到请求记录，包含请求状态码、协议、链接、类型、缓存等；

命令行

fidder提供了一些命令，按alt+q可以快速聚焦命令行； 在命令行中输入：help即可打开文档；

常用的命令行

  • ?搜索内容
  • =状态码(200\302\404...)
  • =请求方法(get\post...)
  • select 响应类型(image\css\html)

状态栏

  1. capturing是否捕获中
  2. all process，捕获对象（所有、浏览器、非浏览器）
  3. 断点开关
  4. 请求序号
  5. 请求的完整链接

请求详情

请求头、文本视图、form表单参数、Cookies、原始Http请求头、Json视图等

响应详情

响应头、文本视图、图片视图、Web视图、Cookies、原始Http响应头、Json视图等

如何抓包？

为什么抓不到？

正常情况下，启动了fiddler就可以抓包，但有时候怎么也抓不到，我将几种可能的情况列举如下。

  1. 左下角没有显示Capturing，这个时候可能是不小心关掉了，也可能是被其他软件抢占了代理导致，点击重新打开即可；

Capturing开关.png

  1. 没有配置捕获https，请到fidder最上方的菜单栏：Tools - HTTPS - 勾选Capture HTTPS CONNECTs、勾选Decrypt HTTPs traffic，勾选之后会弹出提示让你安装一下证书，点确认就好；

https证书.png

https证书安装完成.png

  1. 请求被缓存了，比如一些js文件通常情况下都会被浏览器缓存，这个时候不会被fiddler抓到请求，这个时候可以勾选一下Disable Cache，然后就可以抓到了。 请求缓存.png 禁用缓存.png

  2. 勾选了Filters，如果是不小心的，取消勾选Use Filters即可 Filters开关.png

显示IP、时间、耗时、请求方法列

  1. 菜单栏 - Rules - Customize Rules，或者在右侧功能区，找到FiddlerScript
  2. 要显示IP列，先找到Main函数，添加如下代码
static function Main() {
  FiddlerObject.UI.lvSessions.AddBoundColumn("Server IP",120,"X-HostIP");
}
  1. 显示发起时间、请求耗时、请求方法列，直接在Handlers类中添加如下代码
// 请求的发起时间
public static BindUIColumn("Send Time", 80)
function SendTimeToString(oS: Session){   
  return oS.Timers.ClientBeginRequest.ToString("HH:mm:ss.fff");
}

// 请求耗时
public static BindUIColumn("Take Time", 80)
function CalcTakeTime(oS: Session){             
  if ((oS.Timers.ClientDoneResponse > oS.Timers.ClientBeginRequest)) {
    var DiffVal = (oS.Timers.ClientDoneResponse - oS.Timers.ClientBeginRequest).TotalMilliseconds;
    if (DiffVal >= 1000) {
      // 大于1000毫秒的，单位设置为s
      return (DiffVal / 1000).ToString('f2') + 's';
    } else {
      return DiffVal.ToString('N0') + 'ms';
    }
  }
  return "0ms"; 
}

// 显示请求的METHOD
public static BindUIColumn("Method", 40)
function RequestMethod(oS: Session): String {
  return oS.RequestMethod;       
}
  1. 重启Fiddler即可看到补充的这些列 补充的列.png

FiddlerScript使用的是C#语法

请求断点，修改请求参数和响应结果

点击如下位置即可切换断点开关： 断点开关.png

断点类型：

  • 请求断点（在发送请求之前断点，可修改请求参数等） 请求断点.png

  • 响应断点（在响应之后断点，可修改响应结果等） 响应断点.png

请求断点，修改请求参数：

我们以百度搜索掘金关键词为例，通过请求断点将关键词改为稀土掘金

  1. 打开请求断点，找到对应请求及对应的关键词参数 请求断点1.png

  2. 修改关键词参数，点击Run to Completion，则修改完成即可看到修改请求参数后的响应结果 请求断点2.png

  3. 修改完成之后，关闭断点，点击Go放开剩余被断点请求 结束断点.png

响应断点，修改响应结果：

我们以修改掘金创作者等级为例

  1. 首先我们找到用户等级的请求：api.juejin.cn/user_api/v1…

  2. 设置响应断点，刷新掘金页面，重新请求，然后并没有发现对应的请求，这个时候可以点击Go往下走，即可看到请求 响应中没有看到用户等级的请求.png

  3. 点击Text View(JSON视图无法修改内容)，可以看到响应内容是乱码，我们点击上面的黄色区域Response body is encoded. Click to decode即可看到正常的响应内容 找到用户等级请求.png

  4. 修改等级数据，然后点击Run to Completion即修改完成，然后同上放开所有断点 找到用户等级数据.png

  5. 切换到掘金个人中心页面，即可看到修改后的等级，瞬间成为8级大佬可还行🤣 修改用户等级响应之后.png

响应内容替换为本地文件，实现线上代码调试

这里我们启动一个本地服务做测试

  1. 本地服务源码 本地服务html.png 本地服务原始js.png

  2. 打开Fiddler，选中对应的请求，切换到AutoResponser选项卡，勾选enable rules，勾选unmatched requests passthrough(允许未匹配到的请求正常响应), 点击Add Rule，在Rule Editor下方第二个下拉框，选择Find a file...，选择要替换的文件，设置完成后，点击Save AutoResponser响应替换为本地文件.png 本地服务修改后js.png

  3. 查看响应结果，被替换成功，这个时候随便修改这个js文件，刷新页面即可看到实时修改的内容，对于调试线上代码非常方便 修改后响应.png

以上修改不止于替换js文件，还有图片、html等，还可以修改响应状态码...

请求重试，修改请求参数，调试接口

重新请求可以先选中请求，然后点击工具栏的Replay，或者使用快捷键R

对于需要修改参数重新请求，我们可以使用Fiddler的Composer模块，相较于postman会更方便一些，比如一些需要鉴权的接口，用postman还需要手动设置一下鉴权，比如cookie啥的，而Fiddler可以直接在原有请求上修改，这对于调试接口很有用。

以掘金搜索Fiddler为例，我们通过Composer将搜索参数修改为Filder入门，然后重新请求。

  1. 首先找到对应的请求，然后拖动到Composer面板中 Composer.png

  2. 修改请求参数，然后点击Execute即可以修改后的参数重新发起一次请求，然后就可以在监控面板中看到重新发起的请求 修改请求参数重新请求.png

查找请求

有时候请求太多，如何找到我想看的那个请求呢？

  1. ctrl+f，搜索并高亮请求，可设置搜索请求、响应、链接、正则匹配、高亮颜色等；
    高亮请求.png

  2. 命令行，通过?要搜索的内容，比如?/list即可匹配出带有/list的url，命令行还有很多功能，比如=200：查找响应码为200的请求，=post：查找post请求，select image：查找图片类型

仅捕获某个进程

  1. 仅捕获某个进程，工具栏第9个选项：Any Process，按住拖动指向应用窗口即可； 指定进程.png

仅捕获某个域名

Filters - 勾选Use Filters - Host第二个下拉选项，设置为Show only the following Hosts - 输入想要捕获的域名，然后点击Actions - Run FilterSet now，应用filter设置. 指定域名.png

弱网测试

FiddlerScript - 找到OnBeforeRequest钩子函数，添加如下代码：

static function OnBeforeRequest(oSession: Session) {
  // 设置请求每kb延时3秒
  oSession["request-trickle-delay"] = "3000";

  // 设置响应每kb延时3秒
  oSession["response-trickle-delay"] = "3000";
}

弱网测试.png

移动端设备抓包

  1. 确保当前设备和移动端设备连接的是同一个网络
  2. 设置Fidder，菜单栏 - Tools - Options - Connections - 勾选Allow Remote computers to connect（允许远程计算机连接），端口默认是8888，可以修改为别的

允许远程代理.png

  1. 将移动端设备的代理设置为PC的Fiddler的代理，ip+端口（默认8888） 查看ip.png 移动端代理设置.jpg

  2. 然后可能还需要安装Fiddler的证书，移动端设备浏览器访问Fiddler的代理端口，点击FiddlerRoot certificate下载证书，然后安装（各品牌设备安装操作不一致，请自行摸索） 证书下载.jpg

  3. 然后移动端设备发起请求时，即可在Fidder上查看到请求记录

感谢阅读

其他好文推荐

token的藏身之处

Promise深入浅出及源码实现

长文！内功修炼之编程思想 | 内聚耦合、抽象、插件式

这一篇关于移动端适配的文章，简单明了

这20多个实用的 JS 技巧，你可能还没有见过

avatar
文章
阅读
粉丝