当前位置: 首页 > news >正文

Fiddler抓包工具之详细使用步骤(超详细)

Fiddler抓包工具,前端开发中进行调试的时候,可以作为辅助工具进行数据模拟。下面详细的写下使用步骤。

下载Fiddler

感兴趣的可以去Fiddler进行下载安装,可能会麻烦些。我直接提供一个免安装的包,放到我网盘,直接通过链接和提取码进行下载,链接:https://pan.baidu.com/s/13xzN9GNm6jb7YXf1wb2ZWQ 提取码:vzk0。下载后解压就可以直接使用。

设置Fiddler

1、下载后解压文件,在文件夹中找到Fiddler.exe打开。

2、打开后会有一些提示,选择Next time和No,这都是更新相关的提示,暂时不需要。

image

3、打开顶部工具栏的Tools=》Options面板=》选中HTTPS,勾选Decrypt HTTPS traffic和Ignore server certificate errors (unsafe),最后点OK保存。

image
image

4、打开顶部工具栏的Tools=》Options面板=》点击Actions=》选择Export Root …导出证书安装工具到桌面。

image

5、导出后在桌面可以看到FiddlerRoot.cer文件,执行文件,进行证书安装。

image

6、导入证书向导,选择将所有证书都放入下列存储(受信任的根证书办法机构)。

image
image

7、设置代理参数:打开顶部工具栏的Tools=》Options面板=》Connections,勾选allow remote computers to connect=》设置代理端口号8888=》OK保存。

image

使用Fiddler

1、设置拦截的请求:在Fiddler的下方输入 bpu 接口名称,比如:bpu https://api.book118.com/applet/index/getRecommendDocs?app=WEIXIN&version=20.11.1302&env=development。输入好之后,直接Enter确认。注意: 在bpu和接口之间有一个空格。

image

2、在调用接口的客户端刷新页面,可以观察到接口一直未返回数据,并且发现Fiddler会高亮显示,这说明接口被Fiddler工具成功拦截。

image

3、回到Fiddler界面中,可以在左侧的列表中看到一个红色标识的接口,就是我们需要抓取的接口,点击该项就会在右侧显示相关信息。点击Break on Response,选中TextView就可以看到返回的数据,返回的数据是可以在这里改动,点击Run to Completion将数据返回到客户端(注意: 这里在修改数据之后,在客户端可能会接口报错,可以通过下面的解决客户端报错进行解决)。

image

假设将返回数据的code改成201,返回到客户端就会生效。
image

解决客户端报错

在使用fiddler更改服务端返回的值时候,在浏览器上解码失败net::ERR_INVALID_CHUNKED_ENCODING,是因为修改返回值的时候,长度也发生了变化,所以需要将长度值也改了才能成功。

image

经过查阅资料,发现该接口消息头使用的是Transfer-Encoding:chunked,分块传输编码(Chunked transfer encoding)是超文本传输协议(HTTP)中的一种数据传输机制。了解更多推荐一个大佬的博客Transfer-Encoding:chunked详解。

image

那么遇到这种问题,还是可以解决的:

既然跟长度有关,那么我们在改了数据的长度之后,也把长度更改了就OK了。只是Fiddler上面的数据里面显示长度是16进制,需要转换成10进制+添加的字数,再转换成16进制替换,再返回数据就OK了。如图中的30f改成314,可以使用在线进制转换工具进行计算。

更改前:

image

更改后:

image

更改后成功返回到客户端:

image


关注更多知识,不迷路

小伙伴,用你可爱的小手,点个赞,关注我了解更多知识!!!

如果任何疑问的可以在评论区留言或者私聊。

可以加QQ群交流:568984539,加群备注‘地区-名字-技术类型’。

更多前端、uniapp、nodejs等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

相关文章:

  • Apifox接口管理之前端快速mock各种数据
  • 识别诈骗邮件
  • uniapp开发:uniapp之vue3.2开发页面传值的解决方案
  • 获取的文件大小转换成MB
  • 数据包一些概念解释说明
  • 基于jQuery轮播carousel.js(轻量化-企业级)
  • uniapp开发:uniapp之vue3.2获取节点信息的差异
  • jq实现拖拽功能-解决滚动条引起的偏差
  • JavaScript类型识别
  • 前端页面跳转的6大类方法及其使用场景特性分析
  • [saiku] olap数据源管理
  • uniapp开发:瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端
  • Chrome浏览器使用Overrides调试线上代码的技巧
  • js查找json数据中的最大值和最小值方法集结
  • CSS3 Border-color
  • 网络传输文件的问题
  • [译]如何构建服务器端web组件,为何要构建?
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • 0基础学习移动端适配
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?
  • Codepen 每日精选(2018-3-25)
  • ES6核心特性
  • JavaScript 一些 DOM 的知识点
  • Java知识点总结(JDBC-连接步骤及CRUD)
  • js数组之filter
  • Mac 鼠须管 Rime 输入法 安装五笔输入法 教程
  • nodejs:开发并发布一个nodejs包
  • node和express搭建代理服务器(源码)
  • PHP面试之三:MySQL数据库
  • vue-router 实现分析
  • web标准化(下)
  • 记一次删除Git记录中的大文件的过程
  • 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
  • 如何在GitHub上创建个人博客
  • 写给高年级小学生看的《Bash 指南》
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • ###项目技术发展史
  • (iPhone/iPad开发)在UIWebView中自定义菜单栏
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (Redis使用系列) SpringBoot 中对应2.0.x版本的Redis配置 一
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (官网安装) 基于CentOS 7安装MangoDB和MangoDB Shell
  • (力扣记录)1448. 统计二叉树中好节点的数目
  • (三) prometheus + grafana + alertmanager 配置Redis监控
  • (一)kafka实战——kafka源码编译启动
  • ****** 二十三 ******、软设笔记【数据库】-数据操作-常用关系操作、关系运算
  • @ComponentScan比较
  • [20180129]bash显示path环境变量.txt
  • [Android]Android P(9) WIFI学习笔记 - 扫描 (1)
  • [Angular] 笔记 20:NgContent
  • [cocos2d-x]关于CC_CALLBACK
  • [c语言]小课堂 day2
  • [Dxperience.8.*]报表预览控件PrintControl设置
  • [Gradle] 在 Eclipse 下利用 gradle 构建系统