品牌型号：联想ThinkPad X1

系统：Windows10家庭版

软件版本： Fiddler 4

Fiddler通过在本地搭建代理服务器，将浏览器或者客户端的请求导向自己，从而实现了对网络通信的全程监控，让开发者能够快速定位数据交互过程中的异常，可是在使用的时候，很多人不知道Fiddler如何定位bug是前端还是后端，Fiddler抓取不到请求该如何解决。接下来我们将结合这两个工作中常见的问题展开详细的讨论，帮助大家提升网络调试的效率。

一、Fiddler如何定位bug是前端还是后端

Fiddler作为一款网络调试工具，在Web开发领域备受青睐，尤其是它强大的抓包分析能力，让它成为了前后端工程师的得力助手。下面就给大家介绍一下Fiddler如何定位bug是前端还是后端：

1、我们在开发测试的时候，有时候会出现前端页面发送请求，但是迟迟没有等来服务器响应的情况。我们打开Fiddler，并且在Fiddler右侧面板找到Filters设置下过滤器，然后开始抓包。

2、回到页面中，继续操作页面触发请求。如果在Fiddler左侧的请求列表中没有出现对应记录，这表明问题大概率出现在前端，例如可能是JS代码没有正确绑定事件，或者是URL拼写错误，再或者是浏览器缓存导致了没有发送新请求。如果是因为浏览器缓存没有发送新请求，我们可以在Fiddler菜单栏中找到Rules规则选项，然后在Rules菜单栏中找到Performance，找到并选中Disable Cache选项重新测试。

3、如果请求列表中出现了对应记录，说明前端确实有发送请求给服务端，那么我们就需要打开具体的请求查看请求的参数、方法是否跟后端接口设计的一致。

上述问题都没有的话，那很大可能是后端服务器响应数据不符合前端页面接收的要求，可以查看响应状态以及响应内容。

二、Fiddler抓取不到请求

前面在判断Bug是出在前端还是后端的时候，已经分析过了，如果Fiddler抓不到请求，我们可以检查下页面的URL是否输入有误，尤其是当我们设置了过滤器的时候，假设我们输入的过滤器只拦截fiddler.com这个域名下，但是前端页面是fiddler.com的请求，那肯定就拦截不到了。所以，错误的拦截器，会影响Fiddler正常抓取和展示记录。

此外，抓不到请求还有个可能就是前端页面没有发送请求给到服务器，我们可以借助浏览器的F12开发者工具检查下页面代码是否能正确提交请求，并且检查下当前控件或者按钮的JS代码是否正确绑定事件。

要知道Fiddler是通过搭建本地代理服务器来实现抓包的，也就是说其实在运行Fiddler的时候，默认有个设置会监听本地代理127.0.01的8888端口，在使用Fiddler抓取App或者非本地的请求的时候，我们还要注意设置正确的IP和监听端口。在Fiddler菜单栏找到Tools选项，然后再在tools下找到Options打开Options面板后直接找到Connectios并设置自定义代理参数即可。

以上就是Fiddler如何定位bug是前端还是后端，Fiddler抓取不到请求的全部内容了。使用Fiddler抓包进行网络调试的时候，当出现Bug时，我们可以先看下Fiddler有没有抓到请求记录。如果没有，排查下Fiddler设置问题，基本上可以判断问题出在前端代码，如果抓到了前端请求，则说明问题处在后端响应上，检查下后端响应的状态码或者响应数据。Fiddler抓取不到请求可能是代理IP或者监听的端口设置不对，也可能是前端代码没有正确绑定JS事件。