Fiddler前端页面调试工具简易入门

Posted 2020-06-24 浅水

前端初级选手们最常用的工具应该算是各大浏览器自带的调试工具了（就是各大浏览器们按F12调出来的那个货），作为初级选手我也是用这些调试工具进行调试，最初觉得Firefox的firebug牛逼，好用。还可以按装webdeveloper等各种插件，用起来很牛逼。后来转战chrome，发现这个浏览器用着爽啊，调试工具也不差，但是总感觉有时候有些复杂，或者力不从心，于是去网上了解大神们的调试工具，发现一款挺牛叉，简单用用推荐大家。

下面就是今天推荐的闪闪发光的工具Fiddler它可以用反向代理的身份帮助你调试线上的网站，也可以帮你调试移动端的页面，用起来真是爽爽哒。废话少说下面开始正题。

 

Fiddler是个啥：

“Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。”

这是百度百科给的定义，单从括弧里边的解释--指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思--隐约可以感觉这是个可以在前端页面捣乱的熊孩子。真是因为这个这货能为了前端选手们的调试工具。

 

反向代理是个啥：

“反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。”

没错又是百度百科摘来的（我也很惭愧，但是没办法）。简单来说反向代理就是帮助服务器的，用户在浏览页面或者其他服务器上的资源时反向代理服务器接收用户请求并向服务器请求资源，得到资源后再反馈给用户，但是用户不知道反向代理这层的存在，感觉就是在直接访问服务器。在反向代理服务器里边我们可以做很多设置来帮助服务器减轻负担，屏蔽危害等。站在服务器的角度看反向代理服务器跟站在用户的角度看代理服务器其实感觉差不多应该。

 

如何利用反向代理调试：

了解了反向代理之后，当我们要调试一些线上页面时，我们打开浏览器，输入地址查看页面，这个过程实际就是用户请求服务器的过程，我们打开fiddler后，fiddler会监听我们的请求数据和接收到的数据，前面说了Fiddler是一个http协议调试代理工具，所以它能够监听所有来往数据。

由于它可以监听所有数据并且可以把这些数据在两者之间相互传递，那么它想要篡改这些内容那么它应该可以做到。就好比一个中间的传话的人，在传话时加些莫须有的内容传过去，听的一方肯定以为是另一方传来的。Fiddler也有这么个功能，可以指定本地文件替换掉从服务器传来的文件，但是浏览器并不知道，它会按照fiddler给它的数据来渲染页面，从这个角度看fiddler实际是实现了一个反向代理的功能，我们就可以利用这个功能来调试我们的线上的东西了。

看看是怎么实现：

我们拿博客园首页试一下吧，首先你得打开fiddler，然后在浏览器里边刷新博客园首页，再回到fiddler可以看到左侧列表里边有很多请求记录，找到aggsite.css这个文件，我们就是要把博客园首页的背景颜色换掉所以要找css文件，如下图：

 

对就是这个文件，我们右键它，然后save 好像只能open as local file才能正常下载下来（总觉的是我的方法不对，没有找到下载的方法）。下载下来保存好（我比较懒，直接放到了桌面，您随意）。

保存完，看看fiddler右侧窗口很多选项卡，找到AutoResponder并激活它。可以看到下面这么个界面：

 

恩，面板是空的，在左侧列表把刚才那个css文件拖到面板来，你会发现多了个文件了。下图：

 

接着在下面的Rule Editor 那下面的文件选择按钮那，选择我们刚刚保存在桌面的aggsite.css文件，然后save。当然记得要把上面的Enable rules选中，不然不起作用。

选中Enable rules

 

好了，接下来我们去编辑本地的css文件了，把body的背景色改成黄色，然后回到浏览器，刷新博客园首页。

哇擦咧，发现博客园首页背景色居然真的变成黄色了，太神奇了不是吗。好吧是我大惊小怪了，见的世面少啊还是，下面是效果。

 

对，设置fiddler作为反向代理调试代码就这么简单，没有什么难的。easy~   ， 那接下来看看如何调试手机端页面吧。

 

如在移动端 调试：

大概思路就是通过把你的机器设置为手机的代理服务器，这样通过fiddler做代理实现fiddler对你手机网页的监听，这一步实现后剩下的操作就跟上面的操作一样了。既然这样，那么我们只接受下如何设置fiddler作为手机的代理。

首先需要保证你的主机和手机在同一局域网，一个网段好连通啊（我们公司不同的WiFi不是同一个段，我用我的itcode连的WiFi跟我主机不是一个，让我郁闷一阵子，后来只能又换了一个组里自己搞定WiFi）。

接下来设置一下fiddler，在tools里边找fiddler options....   在打开的面板里边找到connections 选项卡，激活后勾选Allow remote computers to connect那项，如下图：

 

意思就是，随便，只要你们想连都可以啊，来吧，我奉献我的带宽，看看我是不是很有奉献精神。。。。好吧~，再说就跑题了。。。。

设置好fiddler之后，查看自己机器ip地址，然后在手机上无线连接里边设置代理。

我用的罗永浩的情怀手机，点开无线里边有个高级设置，代理设置就在里边，其他的手机应该也好找。

好了，设置完，打开手机浏览器，刷一刷某个页面，在fiddler左侧的列表里看看是不是有很多的数据了，如果是手机端访问的页面啥啥的，那就ok，这个代理就设置成功了。

 

最后就用上面我们说的反向代理调试步骤来调试这个页面就ok了。

 

本文完。

 

ps：很多事情看起来可能有些难度，听起来也很牛逼的样子，但是当我们亲身接触一下，研究一下，发现，没想象的那么难。当然要相信牛逼的值得我们学习的东西永远都是存在的。