Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/xxxily/Fiddler-plus

自定义的Fiddler规则，多环境切换、解决跨域开发、快速调试线上代码必备|高效调试分析利器
https://github.com/xxxily/Fiddler-plus

configuration customer developer-tools devtools fiddler http-proxy proxy tools

Last synced: 1 day ago
JSON representation

自定义的Fiddler规则，多环境切换、解决跨域开发、快速调试线上代码必备|高效调试分析利器

Awesome Lists containing this project

README 

        
# Fiddler plus 【高效调试分析利器】



Fiddler是一个功能强大的HTTP抓包调试工具！但用起来却不是那么的顺手，界面繁杂、配置复杂，非常不符合高效程序猿的使用习惯...

Fiddler plus 重新定义了Fiddler的CustomRules.js，从而使Fiddler拥有了更加简单、灵活、丰富的配置方式，高逼格的显示界面，让你用起来不再羞(gan)涩(ga)。



## 开发进度说明：

  ~~最后面提到的开发计划，现已基本开发完，但最近在写说明文档，所以还需过一段时间才会发布新版本~~

  


  ~~ps:文档比代码难写多了！有木有。。。~~



## 特点

* 自定义皮肤，通过简单配置即可拥有跟你喜爱的编辑器一样的界面风格

* 高亮特殊链接，一眼便可定位后台接口、快速区分前端各类静态资源

* 快速切换运行环境，无需重启、即刻生效，环境再多也不凌乱

* 简单配置即可彻底解决跨域开发的窘境

* 强大的过滤功能，轻松过滤无关链接



## 优点&目标

	功能强大、配置简单



## 界面截图

![运行截图](https://raw.githubusercontent.com/xxxily/Fiddler-plus/master/assets/screenshot/screenshot01.png "运行截图")



![运行截图](https://raw.githubusercontent.com/xxxily/Fiddler-plus/master/assets/screenshot/screenshot02.png "运行截图")



## 使用方式



下载当前的 CustomRules.js ，替换掉Fiddler自带的 CustomRules.js 。

正常情况下文件的所在目录为：



	%USERPROFILE%\Documents\Fiddler2\Scripts



你也可以通过Fiddle菜单栏下的 Rules》Customize Rules...   即可打开编辑CustomRules



## 全局配置项一览

```javascript

/**

 * 全局配置项

 * 可配置链接类型的颜色，代理、替换地址等，

 * 默认对象的键【key】为要匹配的规则，值【key】为匹配后的配置

 */

var GLOBAL_SETTING:Object = {

    // 开启或禁止缓存

    disableCaching:true,

    // 过滤配置【用于过滤出哪些URL需要显示，哪些需要隐藏】

    Filter:{

        // 只显示URL包含以下字符的连接

        showLinks:[

            // "qq.com",

            // "baidu.com",

            // "youdao.com"

        ],

        // 不能直接吧 :443规则写在 hideLinks 过滤项上，否则大部分的无关链接都会被间接隐藏

        // Tunnel To 影响前端审查，隐藏掉，目前无法彻底隐藏，逻辑待优化

        hideTunnelTo:true,

        // 隐藏URL包含以下字符串的连接 过滤

        hideLinks:[

            // "baidu.com|qzone.qq.com|qq.com",

            "hm.baidu.com",

            "google.com|googleapis.com"

        ],

        // 只显示以下文件类型【注意：是根据header的 Content-Type字段进行匹配的，所以js文件直接写js是不行的,但支持模糊匹配 】

        // 附注：使用ContentType过滤的时候不一定准确，不带 ContentType的连接会被自动隐藏，该过滤选项的逻辑还有待优化和完善

        showContentType:[

            // "image"

            // "css",

            // "html",

            // "javascript"

        ],

        // 隐藏以下文件类型

        hideContentType:[]

    },

    // 替换URL【可用于多环境切换、解决跨域、快速调试线上脚本等】

    replace:{

        "http://xxxily.com/":"http://xxxily.cc/",

        /*替换成本地某个对应目录下的文件*/

        "http://xxxily.com/m":"D:\\work\\"

    },

    // 替换URL的高级版，可以实现多个项目区分管理，进行二级匹配等

    replacePlus:[

        {

            describe:"将【xxxily】服务器上的静态资源替换成本地服务器上的资源",

            source:[

                "http://xxxily.net",

                "http://xxxily.org",

                "http://xxxily.ac.cn",

                "http://xxxily.cc"

            ],

            /*Referer限定，方便精确控制*/

	        Referer:[

	            '\\w*.html'

	        ],

	        subRules:[

	            {

	              describe:"subRules 字段跟父级字段完全一致，主要是方便对特殊情况进行单独处理"

	            }

	        ],

            urlContain:"\\.html|\\.css|\\.js|\\.jpeg|\\.jpg|\\.png|\\.gif|\\.mp4|\\.flv|\\.webp",

            replaceWith:"http://localhost:3000",

            enabled:false

        },

        {

            describe:"将【本地】请求的接口替换成某个服务器上的接口内容",

            source:[

                "http://localhost:3000/",

                "http://127.0.0.1:3000/",

                "http://192.168.0.101:3000/"

            ],

            urlContain:"",

            urlUnContain:"\\.html|\\.css|\\.js|\\.jpeg|\\.jpg|\\.png|\\.gif|\\.ico|\\.mp4|\\.flv|\\.webp|/browser-sync/",

            // bgColor:"#2c2c2c",

            color:"#FF0000",

            // bold:"true",

            replaceWith:"http://xxxily.cc/",

            enabled:false

        }

    ],



    // 脚本注入

	scriptInject:[

	    {

	      describe:"脚本注入使用示例",

	      // 要注入的脚本路径，可以是本地目录下的脚本，也可以是线上URL脚本

	      scriptPath:"D:\\work\\debugTools\\commonInject.js",

	      // 指定脚本要放置在哪个dom标签里面，默认html 可选值有：html,body,head,title

	      tagName:"head",

	      // 指定放置在标签的哪个位置，默认是before 可选值有 before,after

	      position:'after',

	      /*禁止注入脚本的缓存，也就是为scriptPath增加时间戳参数，默认true*/

	      noCaching:true,

	      /*条件限定*/

	      urlContain:[],

	      urlUnContain:[],

	      enabled: false

	    }

	],



    // 注意：如果匹配的链接过多，很容易导致：数组下标超限/未将对象应用设置到对象实例等错误弹窗提示

    callbackAcion:[

        {

          describe: "回调操作示例代码",

          source:[

            'http://xxxily.cc/dispather-app/dispacher\\?method=dispacher'

          ],

          // exclude:[],

          include:[

            '.html',

            '.jsp'

          ],

          // 可选值有：OnBeforeRequest OnPeekAtResponseHeaders OnBeforeResponse OnDone OnReturningError ，想匹配多个事件可以使用|进行分隔

          onEvent:'OnBeforeRequest',

          callback:function(oSession,eventName){

            var t = this;

            console.log(eventName);



            if(eventName === 'OnBeforeRequest'){

              var Cookie  = oSession.oRequest['Cookie'];

              if(Cookie){

                console.log(Cookie);

              }else {

                console.log('没找到对应的 Cookie');

              }

              console.log('callbackTest:',oSession.fullUrl);

              oSession.oRequest['Cookie'] = "aaa";

            }



          },

          enabled: false

        },

        {

          describe: "篡改登录信息示例",

          source:[

            'https://xxxily.cc/portal/userLoginAction!checkUser.action'

          ],

          onEvent:'OnBeforeRequest',

          callback:function(oSession,eventName){

            var webForms = oSession.GetRequestBodyAsString(),

              strConv = coreApi.strConv,

              webFormsObj = strConv.parse(webForms);



            webFormsObj['username'] = "testUser";

            webFormsObj['password'] = "testPw";



            /*重设请求参数*/

            oSession.utilSetRequestBody(strConv.stringify(webFormsObj));

          },

          enabled: false

        },

        {

          describe: "本地脚本注入示例",

          source:[

            "xxxily.net.cn",

            "xxxily.com.cn"

          ],

          include:[

            '.html',

            '.jsp',

            'vendor.js',

            'commonInjectForDebug'

          ],

          onEvent:'OnBeforeResponse',

          callback:function(oSession,eventName){



            /*给HTML页面注入调试脚本*/

            if ( oSession.oResponse.headers.ExistsAndContains("Content-Type", "text/html") && oSession.utilFindInResponse("