前端web调试工具---fiddler
fiddler是一个很强大的工具,能够拦截网络请求、查看请求、伪造请求以及可以解密http的会话甚至可以测试性能。这篇是在看慕课网Fiddler工具使用时的笔记。
工作原理
客户端与服务器之间创建了一个 fiddler 代理服务器(Proxy),通过修改浏览器的代理服务器地址,浏览器就可以截获浏览器发出的请求。
代理模式:
流模式: Streaming 可实时把服务器端数据发给客户端 更接近浏览器本身真实的行为
缓冲模式: buffering http请求所有的数据都准备好之后才把数据返回给客户端 ,可控制最后的缓冲响应常见的使用场景
开发环境host配置: 通常情况下 配置host需要更改系统文件很不方便,在多个开发环境下切换很低效。
前后端接口调试:
线上bugfix : fiddler 可将发布文件代理到本地,快速定位线上bugFiddler 工具条常用功能
依次为 备注、 重新发送请求、清除面板内容 、从断点处继续运行配合底部状态条的向上箭头(向外发送的时候打断点)与向下箭头(收到请求时打断点) 、默认是缓冲模式, 将url进行解码,保持的会话个数(当内存性能不好时应少保存写会话)、下一个是过滤请求 (拖动十字到某个浏览器然后放开)、查找、保存当前会话、截图、计时、打开某个浏览器、清空缓存、文本编解码、面板分离Fiddler 底部状态栏操作
黑色框框输入命令
capturing 是控制Fiddler是否工作
下一个是 过滤拦截条件
下一个是 打断点的箭头
下一个是 会话总数
下一个是 选中会话时的urlFiddler监控面板的使用
左边面板是会话列表 状态 协议 等
右边 statistics 数据统计 性能指标 RTT 数据往返时间 showchart 面板统计
inspectors 对请求进行解包 可以看到响应的内容、请求的数据
autoResponder 使用本地文件做远端服务器的文件代理(从左边拖过来请求 然后右边下面选择一个文件,下次从再请求时会返回这个从本地的文件)当线上存在bug时 从本地做修改 然后就可以看到修改效果。
composer 前后端接口联调 (从左边拖过来请求,然后修改请求 然后excute 就可以重新发送请求了)
log 记录log 日志
timeline 网站性能分析使用Fiddler做host配置
静态文件js img 为了修改方便通常会放在本地服务器或者非线上运行的服务器
将服务器的ip指向本地 tools-> hosts-> enable 然后配置ip
Fiddler也可以用autoResponder 进行文件、文件夹替换。Fiddler 请求模拟 、前后端接口调试
在 composer 选择请求方式 、填写参数 ,执行excute
注意 在使用post 方法时 不要将请求参数放在url后面,应放在request body 中。网络限速 – 使用 fiddler插件 FiddlerScript
网络限速用于模拟网络速度较差的情况下的性能
这个插件将请求 进行代码化 ,将发送请求的代码延迟(onbeforeRequest事件)或者延迟响应请求
性能分析与优化:会提供请求的实际图