fiddler 前端调试

Posted 2021-04-30 扬吾邦威

    本次分享的经验是利用fiddler工具进行本地前端调试，提升开发效率，快速定位问题。 

一、背景描述

    在前端开发过程中，开发人员常需要通过修改代码验证问题，而对于模测环境上的问题，需要通过补丁发版后才可验证，效率不高。而通过fiddler工具，可进行本地调试，它的原理是通过拦截向服务器请求的jsp/js文件，然后用本地文件进行替换。

二、使用方法

1、打开fiddler工具，进入需要替换的页面，该页面请求被fiddler记录下来，找到该请求，比如：机构信息单笔新增页面

header有请求信息，标红的为替换规则寻找的标识

/cdui/cppm/branchManage/cppm_branch_info_insert.jsp?dse_sessionId=ENFMIFCOBYCUERINJNBSHFFMGTHHEWFQFFBPJUCR&dse_pageId=0&getlogonmenu_flow_context_string=&ffparams=&_SUB_SYSTEM_FLAG=&date=Wed%20Dec%2013%202017%2010:02:00%20GMT+0800%20(中国标准时间) HTTP/1.1

2、把该页面的源码（TextView）复制下来，保存到本地，比如cppm_branch_info_insert.jsp:

3、建立匹配规则，在AutoResponder选项卡中，勾选前两个，并新建规则（Add Rule）,

规则为：regex:(?insx).*cppm_branch_info_insert.*    --前面请求中的flowactionnme

替换为：C:\Users\kfzx-jinyd\Desktop\cppm_branch_info_insert.jsp    --上步保存的文件

4、保存规则，这样下次进入该页面后就会请求本地的cppm_branch_info_insert.jsp文件，这样你随意改动cppm_branch_info_insert.jsp就能立马看到效果了，很方便！ 

5、注意，session可能会超时，如果重新登录后，cppm_branch_info_insert.jsp中的session id要全部更新一下，session id在刚刚的请求信息中有。

6、替换规则：

目前我们的文件请求常用有四种，可用以下四种规则：

regex:(?insx).*util.js.*  --直接请求js文件

regex:(?insx).*int_trade_finance_apply.jsp.*  --直接请求jsp文件

regex:(?insx).*flowActionName=tache_get_tab_op.*  --请求中带flowActionName

regex:(?insx).*int_trade_finance_apply.flowc*  --请求以.flowc结尾

三、安装fiddler

\\122.248.14.10\杭州开发五部\软件共享\fiddler

注意先安装dotnet环境dotNetFx40_Client_x86_x64.exe