Fiddler的安装与使用前端开发测试必备

来源:程序思维浏览:1281次
Fiddler的下载

中文版下载:https://pan.baidu.com/s/1St-xlr7Gy69QDjIHbGXpoQ
打开官网,官网下载地址是https://www.telerik.com/download/fiddler
打开以后选择你的相关信息如下图:
然后点击Download按钮开始下载

Fiddler的安装

下载完成后双击安装包,如下图:



点击I Agree按钮,然后选择你想要存放的安装目录,如果不需要修改,使用默认的即可。



点击Install按钮,等待一会时间后即可安装成功。



点击Close按钮

到这里我们就初步安装成功了。

Fiddler的配置

电脑端监听

我们双击打开软件,进入到如下的一个界面,然后点击某一个请求,你会发现请求的内容是一堆明显不对的文字,然后该请求的左边是一个锁的样式,联想到https加密,你会发现原因可能是没有配置Fiddler。然后解释一下右边的默认返回内容,第一句是**“这是一个CONNECT隧道,加密的HTTPS流量通过该隧道流动。”**,就证实了我们的猜测,果然是因为https加密的原因。


那么如何配置FIddler来解析这些加密的请求呢?方法一是查官网的安装文档,二是看提示,软件公司还是很人性化的在返回内容里面提示了需要在哪里设置,就是第二行那一句:
"enable the Tools > Options > HTTPS > Decrypt HTTPS traffic option."

我们按照提示来进行设置,先在左上角的工具栏里面找到Tools,然后依次选择Options、HTTPS ,然后勾选Decrypt HTTPS traffic选项,勾选后安装证书。


安装证书两种方法:

勾选后点击右边的Actions按钮选择**“Trust Root Certificate”**选项,然后全部选择是就行了。
勾选后点击右边的Actions按钮选择第二个选项将证书导出到桌面,然后再在对应的浏览器里面添加即可。
然后我们再打开一个新的网页(例如百度),查看请求

至此,已经可以监听PC端浏览器的请求了。

手机端监听

但是如果你想要对手机上的app进行抓包怎么办呢,那么你还需要进行以下操作:

首先你的Fiddler所在的电脑和手机必须处在同一个局域网内(即连着同一个路由器)。

查看你的本机IP地址,在Fiddler的右上角有一个Online按钮,点击一下会显示你的IP信息

配置连接信息:Tools > Options >Connections
- 端口默认是8888,你可以进行修改。
- 勾选Allow remote computers to connect选项,然后重启Fiddler,再次打开时会弹出一个信息,选择ok即可。


打开你的手机,找到你所连接的WIFI,长按选择修改网络,输入密码后往下拖动,然后勾选显示高级选项,然后在代理一栏选择手动,再将你先前查看的IP地址和端口号输入进去,然后保存。


最后安装手机证书,在手机浏览器一栏输入电脑的IP地址和端口号
 
这里我是192.168.1.157:8888
 
进入一个网页,点击最下面那个FiddlerRoot certificate下载证书,下载成功后在设置里面安装,安装步骤:打开高级设置->安全->从SD卡安装证书->找到证书文件->点击后为证书命名点击确定即可安装成功
 
(我的手机是华为的,具体过程请根据实际机型百度查找,关键词是从SD卡安装证书)
 
测试一下,比如在手机上打开抖音app,找到评论的那一个请求。


可以看到我们已经成功的找到了评论所对应的那个请求

到这里就已经大功告成了!
 
精品好课
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
收藏
扫一扫关注我们