1. 初识fiddler
作用:截获HTTP/HTTPS请求,查看截获的请求内容,伪造客户端请求和服务器响应,测试网站性能,解密https的web会话,提供插件。
工作环境:支持所有操作系统和所有浏览器,对win有更好的支持。
当打开fiddler后,浏览器中工具>internet选项>连接>局域网设置高级>代理设置中,代理服务器地址被fiddler修改。
2.fiddler两种代理模式:流模式(streaming)缓冲模式(buffering)
流模式:fiddler会实时把服务器返回给客户端的数据返回给我们。流模式更接近于浏览器真实的行为。
缓冲模式:fiddler会等待http请求所有的数据都准备好之后才会返回给应用程序。
3.使用场景:
1:开发环境host配置——通常情况下,配置host需改系统文件很不方便;在多个开发环境下切换很低效。fiddler提供了相对高效地host配置方法。
2:前后端接口调试——通常情况下,调试前后端接口需真实的环境、一大堆假数据、写js代码。Fiddler只需一个UI界面进行配置即可。
3:线上bugfix——Fiddler可将发布文件代理到本地,快速定位线上bug。
4:性能分析和优化。
4. 工具条常用功能
1.消息图示:给Fiddler捕捉到的会话增加一个备注
2.Replay:回放按钮, 通常来讲,捕捉,再回放。按快捷键R,就对一个请求做回放了.
3.X:清空监控面板,remove all 完全清空.
4.Go:调试Debug,在请求了断点的时候,让断点继续往下走,需要结合状态栏里的功能来使用
5.stream:模式切换按钮 ,流模式和缓冲模式,默认是缓冲模式
6.Decode:帮助我们把http里面的请求解压出来.
7.any process:过滤请求
5. 状态栏
黑色条:控制台,可以在此输入一些命令行。输入help,获得指令
左一capturing:控制Fiddler是否工作
Web Browsers:过滤会话来源
左三:截断
左四,数字:记录当前展示的会话数量
6. 监控面板
如何显示ServerIP:
在CustomRules文件中运用Ctrl+F查询 static function Main()
添加一行代码,如下。重启fiddler,然后就能在最后一行看到ServerIP了。
FiddlerObject.UI.lvSession.AddBoundColumn("Server IP",120,"X-HostIP");
Statistics:一个会话的统计信息 可以为优化提供依据
Inspectors: 对请求进行解包 可以查看相应的请求、响应信息
AutoResponder:文件代理 可以把请求的资源用本地文件代理掉 方便调试线上文件。
Composer:前后端接口连调,可以用来伪造请求
Log:记录日志
Timeline:网站性能分析
7. fiddler文件,文件代理,host配置
Host配置:tools--hosts--选中enable...激活,再进行域名配置
请求IP会改变:
host
用Fiddler来配置Host:Tools -> HOST -> 打勾->添加规则->生效;去掉勾,保存,失效,或者直接关闭Fiddler也行。
作用:是把一个网站域名下所有的文件都映射到一台指定的服务器或者一个IP下。
文件替换
拖拽到AutoResponder,EXACT精准匹配(也可以用正则表达式进行模糊匹配),进行save后,可以直接将匹配的文件进行加载。 只映射一个文件,也可以替换响应,延迟等。
8.fiddler请求模拟,前后端联调
请求的伪造:可以伪造Cookie
前后端连调:Composer ->选择请求方式 GET -> copy 地址 参数-> excuete
400回复代表客户端请求错误
POST参数一般要放到RequestBody中
前端页面没有完成的情况下,后端可以用fiddler模拟http请求,联调接口
9.fiddler网络限速
网络限速,功能需要基于fiddler的插件。
点击fiddlerScript在代码里找到onBeforeRequest
FiddlerScript -> static function OnBeforeRequest ->
oSession["request-trickle-delay"]="3000";//请求阶段延迟
osession["response-trickle-delay"] = "3000";//请求立刻发出,回应延迟三秒
Save Script(保存脚本),发送请求
10. fiddler插件
插件很多,具体下载地址:https://www.telerik.com/fiddler/add-ons
JavaScript Formatter:代码格式化插件
Fiddler Add-ons插件:javaScript formatter -> js文件右击 -> 选择 make javascript pretty -> textview / syntaxview 代码全部高亮显示
traffic differ(对比两个不同的对话): 直接拖进两个不同的请求,会显示完整的对比数据 -> 可以用来对比优化前后网站之间的不同
11. fiddler第三方插件
第三方插件:willow ->快速管理host列表 完全可视化 http代理插件
可视化限速
因为没有开源,可以到http://pan.baidu.com/s/1mgocpBi进行下载体验