Fiddler的用法总结

最新推荐文章于 2024-10-08 16:24:39 发布

weixin_33860722

最新推荐文章于 2024-10-08 16:24:39 发布

阅读量99

点赞数

文章标签：后端前端 ViewUI

原文链接：https://my.oschina.net/outcat/blog/1835886

版权

为什么80%的码农都做不了架构师？>>>

（1）请求重定向至本地文件

　　由于我们早期的一些老旧页面，没有托管在我们的Gitlab上，而是直接存放在FTP，所以修改就没那么方便。有时修改这些页面的js或者css，就用了Fiddler的这个线上调试功能，挺实用的。

　　打开你要调试的页面，如图左侧，你会看到有各种请求，然后右侧工具栏切换到AutoResponder选项。

　　选中你要调试的文件（一般是JS，CSS），然后拖拽到如图位置

　　找到 Find a file选项，选择你要用于线上调试的本地文件，然后点save保存，就可以在本地调试线上的页面了。例如在本地文件写个alert语句，重新刷新页面，线上应该能看到效果了。

（2）捕获https请求

　　fiddler默认是不抓取https请求的，所以需要我们再做一些设置。

　　菜单栏选择 Tools->Options->Https，然后再点击Actions按钮，选择Export Fiddler Root Certificate to Desktop把证书导出到本地。

　　然后安装证书，以Chrome浏览器为例，在chrome://settings/找到管理证书的地方，导入此前下载在本地的证书。至此，重新刷新页面应该可以看到HTTPS请求了。

（3）　修改接口返回的数据

　　Fiddler设置断点有2种方式，一种是全局断点，将中断所有请求，Rules-> Automatic Breakpoint -> Before Requests(或 After Requests)。另一种是局部的，可以设置自己想要拦截的请求，在左下角的输入框输入相应的命令即可。推荐使用这种方式。

　　 Before Requests，是指在请求发送到服务器之前断点。对应的命令是 bpu xxx(xxx是你请求的地址，如某个接口)。After Requests，是指客户端发送请求之后，服务器返回给客户端之前断点。对应的命令是 bpafter xxx 。我们把东西拦截下来就是为了篡改里面的内容，以达到我们的目的。调试接口就是这样的，我们可能需要修改某些字段返回的值，来看看我们前端页面的展示情况，不同的返回值页面样式可能不同。

　　前段时间做了一个抽奖的专题，顺便拿来说明一下。点击"抽奖按钮"请求A接口，查看用户剩余抽奖的次数，如果抽奖次数大于0（会有个抽奖的交互，转圈什么的，否则提示没有抽奖机会），然后自动调用B接口抽奖（弹窗提示抽中的奖品）。制作过程中，我用自己的账号登录之后抽奖，抽完之后次数就不够用了，那就满足不了调B接口的要求了，然后看不到抽奖的交互效果和显示结果，那我要怎么制作和调试啊？虽然也可以在代码里设定，比如把某个变量强制设为true，或者写死某个字段的值等等，然后让程序按照你想要的逻辑去跑，但是感觉不太好。那怎么办呢？我总不能每次都和后端同学说，啊，我的账号抽奖次数又用完了，麻烦你帮我在后台改下数据，让我可以无限抽；咦，我IP也达到上限了，也抽不了，你再帮我配置一下，不限IP吧；呀，可以返回固定的这个值吗，让我抽中这个奖品，我看看前端页面展示对不对？...此时后端同学内心可能是崩溃的。这样的做法沟通成本就有点高了。

　　这种情况下Fiddler就登场了，我们自己修改返回的数据达到调试页面的目的...就用bpafter这个命令吧，也就是说我想在服务器返回数据到客户端前，拦截下来修改。左下角输入框输入命令:bpafter xxx(xxx是你请求的接口，可以不带协议头)，然后回车。

　　点击"抽奖按钮"，请求抽奖记录接口，此时你可以打开浏览器控制台看下接口，一直是没数据返回的，因为在fiddler打了断点。看到了吗，选中的接口左侧有个红色图标，它表示响应在断点处被暂停。再看截图右下方处就是接口返回的数据，其中有个字段draw_times表示剩余抽奖次数，现在是为0，为0的话就不能调抽奖接口抽奖了，可以在这里改成1，进入抽奖的逻辑。改完之后，点击Run to Completion运行，然后控制台就可以看到接口有返回值了。