Fiddler 工具使用分享

                        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'）

 

 

 

 

 

未完待续.....