Fiddler 工具使用分享
一. Fiddler 常见使用场景
1. 开发环境host 配置;
2. 前后端接口调试;
3. 线上bugfix;
4. 性能分析和优化
二. 常用工具项介绍
1. 左侧下方控制面板输入: help 可查看控制台常用命令
2. 顶部菜单工具条“Replay”(数据重放), 可以重新执行下方选中项(比如几个接口请求)
3. 可以通过拖拽左侧某个请求项到右侧“AutoResponder”(自动回复器),规则列表中。
然后选中右侧该项并在下方“规则编辑器”第二个文本框下拉中,选中希望返回响应状态,或响应文件;
4. 右侧“Composer” (组合器),允许我们拖拽左侧监控的请求/进程到器编辑区内。然后对希望的请求进行包括:请求头,请求参数,请求方式等自定义修改。然后点击“Execute” (执行), 将会以修改后的请求方式,参数等最新请求信息再次发送请求到服务器。
5. 点击右侧“TimeLine” (时间轴), 该tab下可以统计我们在右侧监控列表中所选项的性能数据。 能提供优化及性能监控依据。
6. Diff (比较) 选项使用
主要用法及作用:
比如比较两个会话/页面 改造前及改造后的性能/差异比对。 能反映我们改造后的提升及不足部分。
三. Fiddler文件,文件夹代理和HOST配置
1. HOST 配置
注: 这里的host 配置修改并发真实的修改我们系统,system下的host文件。fiddler可关闭该配置。
通过顶部菜单栏"Tools" > "Hosts管理" 选项进入host管理。
如下图:
我们有时候可能需要将当前的域名指向,我们需要调试或者阅览的服务器ip地址。 可以通过在这里写入新的主机IP地址,及对应需要映射的域名,来实现。 配置完成后点击保存,然后点击"Replay”(数据重放),重新请求则会发现新的请求ip地址已经是这里配置的最新ip. 如果想取消主机映射,只需要将其上的勾选去掉,点击保存即可。
四. Fiddler 插件使用
1. 可以到fiddler2.com/add-ons 官方网站去查看及下载自己需要的插件来扩展需要的功能。
2. FiddlerScript 网络限速插件(到官网下载),可以运行我们模拟低网速时的页面或请求运行情况。
注:也可以设置延迟(设置延迟时间)发送/响应请求 (如下图通过修改:respones/request 来设置)
上图是通过代码修改来实现限速或延迟功能。也可下载安装图形化插件来实现。使用非常简单。
如下为可视化插件截图:
插件下载地址(网上共享的地址,感谢共享作者):
五. Rule Editor 基本配置规则
1. 前缀为“EXACT:”表示完全匹配(大小写敏感)
2. 无前缀表示基本搜索,表示搜索到字符串就匹配
3. 前缀为“REGEX:”表示使用正则表达式匹配
4. 前缀为“REGEX:(?insx)”表示匹配方式其中:
5. i表示不区分大小写;
6. n表示指定的唯一有效的捕获是显式命名或编号的形式;
7. s表示单行模式;
8. x表示空格说明的;
六. 文件请求代理(调试技巧)
实例场景:
你的生产环境有个js地址: http://www.xxxx/online/js/templates/details.js(该文件压缩了,不方便调试)。
现在你想代理到本地的如下路径:http://localhost:8008/templates/details.js
那么你可以这样配置 Rule Editor:
然后刷新页面, 即可看到代理后的本地源码。
这里我亲测了一下, 对webpack 打包/启动的服务同样适用。 (开发模式下我的:devtool: '#cheap-module-eval-source-map')
未完待续.....