下面就是今天推荐的闪闪发光的工具Fiddler它可以用反向代理的身份帮助你调试线上的，也可以帮你调试移动端的页面，用起来真是爽爽哒。废话少说下面开始正题。
Fiddler是个啥：
&Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的和之间的http通讯，设置断点，查看所有的&进出&Fiddler的数据（指,html,js,css等文件，这些都可以让你胡乱修改的意思）。&
这是百科给的定义，单从括弧里边的解释--指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思--隐约可以感觉这是个可以在前端页面捣乱的熊孩子。真是因为这个这货能为了前端选手们的调试工具。
反向代理是个啥：
&反向代理（Reverse Proxy）方式是指以代理来接受上的连接请求，然后将请求转发给内部上的服务器，并将从服务器上得到的结果返回给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作为手机的代理。
首先需要保证你的主机和手机在同一，一个网段好连通啊（我们公司不同的不是同一个段，我用我的itcode连的WiFi跟我主机不是一个，让我郁闷一阵子，后来只能又换了一个组里自己搞定WiFi）。
接下来设置一下fiddler，在tools里边找fiddler options.... & 在打开的面板里边找到connections 选项卡，激活后勾选Allow remote computers to connect那项，如下图：
意思就是，随便，只要你们想连都可以啊，来吧，我奉献我的带宽，看看我是不是很有奉献精神。。。。好吧~，再说就跑题了。。。。
设置好fiddler之后，查看自己机器，然后在手机上无线连接里边设置代理。
我用的罗永浩的情怀手机，点开无线里边有个高级设置，代理设置就在里边，其他的手机应该也好找。
好了，设置完，打开手机浏览器，刷一刷某个页面，在fiddler左侧的列表里看看是不是有很多的数据了，如果是手机端访问的页面啥啥的，那就ok，这个代理就设置成功了。
最后就用上面我们说的反向代理调试步骤来调试这个页面就ok了。
ps：很多事情看起来可能有些难度，听起来也很牛逼的样子，但是当我们亲身接触一下，研究一下，发现，没想象的那么难。当然要相信牛逼的值得我们学习的东西永远都是存在的。如何使用Fiddler调试线上JS代码_百度知道急！！！使用Fiddler修改inspectors下面的webfoms下的参数怎么改，求可以直接改的方法。。_百度知道作者：Uncle Chen原文：http://unclechen.github.io//使用前端开发利器Fiddler调试手机程序/Fiddler是一个非常好用的web前端调试工具，它能记录客户端和服务器的http和https所有请求和响应，允许监视、设置断点，修改输入输出数据。与其他的抓包工具，例如wireshark、firebug等不同，Fiddler可以允许你在调试CGI接口时，修改返回的数据，也就是可以构造请求和模拟响应。此外，Fiddler还可以支持模拟低速网络（如手机网络）过滤请求等等，安装了Willow插件以后你还可以轻松实现修改Host等操作。可惜的是目前Fiddler只支持Windows系统，没办法，毕竟是基于.net框架开发的嘛。1. Fiddler的安装和配置下载安装：官网下载Fiddler：/download/fiddler注意：由于Fiddler4是基于.net框架的，所以需要在自己的电脑上先安装.NetFrameWork，安装好了以后，就可以下载Fiddler4进行安装了。配置：打开将Fiddler，在菜单中选择Tools-&Fiddler Options，如下图所示把Fiddler设为全局的监听，再把浏览器或者软件的的http proxy设置为127.0.0.1，端口设为8888。选择ok后，关闭Fiddler并重新打开Fiddler，就可以用Fiddler抓取本地所有的流量了。2. 抓取手机数据包抓取手机数据包和抓去电脑上的数据包一样，只需要将手机的代理设置为Fiddler。具体操作：让手机连接的wifi和你安装Fiddler的电脑处于同一网段，然后在手机的wifi设置中，选择高级选项，设置代理，指向你电脑的ip，端口设置为8888即可。如上图所示，我电脑的ip是10.4.66.135，于是在手机连上wifi以后，勾选高级选项，代理选择手动，代理服务器主机名输入10.4.66.135，代理服务器端口输入8888，点击保存即可。配置好以后，手机上所有网络请求和响应都会走Fiddler代理，这样就可以分析手机的网络流量了。我们在手机上打开一个大家熟悉的地址，可以看到抓取的数据流量包了，Fiddler的工具栏看起来很复杂，如下图所示，稍微熟悉一下之后就会发现其实很简单。左侧界面是数据包按照时间顺序的列表，右边是对应每一个包的解析，我们可以看到详细的http header头文件以及表单、json数据等等。3. 修改网络响应response有的时候我们调试程序的时候，需要服务器返回新格式的数据，或者有时候发现原来的服务器上的某个js/css文件有问题，需要修改。如果这时我们要求同事帮忙修改文件，重新发布的话，将会非常麻烦，也可能会影响到现有的线上环境。对大公司来说，这不仅效率低下，而且一不小心就可能酿成大事故。所以通常的做法是在测试环境进行修改，然后等测试通过以后，再部署到线上环境中去。但是有了Fiddler之后，我们可以直接在本地客户端进行调试了。通过Fiddler修改HTTP数据的特性，替换服务器发给我们的回包，等本地客户端调试通过以后再确认发布。说了一堆没用的，我们直接进入实战。使用Fiddler修改网络响应包有两种操作：使用AutoResponder对回包进行重定向使用Willow插件管理重定向规则这两种操作方法是一样的，都是对服务器返回的数据包（下面简称回包）进行规则的设置，使得回包被替换成我们指定的文件。不过Willow插件用起来比较方便，所以我们一般都会安装Willow插件。现在我们以Willow插件为例介绍这个非常好用的回包替换功能，我这里安装的是1.4版的Willow，支持Fiddler4.0版本。安装了Willow插件的Fiddler，在右侧的网络数据解析界面上会多出一个Willow标签菜单，如下图所示。从图上看出，Willow的图标是一个小树，当回包重定向功能开启时，这颗小树会变成绿色，普通状态下小树是灰色的。在下面的列表中，Fiddler、Temp 1、unclenought等都是一个一个的Willow project，这些project对应的是一组一组的规则，这里我们添加一个unclenought的project。在Willow菜单内右键可以选择Add Project、Edit Project以及Add Rule等等。其中我们最常用就是Add Rule功能了，通过这个我们可以设置一些规则，将回包进行重定向。右键选择Add Rule以后，我们在Match栏填写正则表达式来匹配网络请求，Action栏选择我们本地的一个文件来替换match栏对应的请求的回包,这里我选择了自己写的一个hello fiddler.html测试文件。记住，规则保存好了以后，必须勾选Willow菜单左上角的小勾，使得回包替换功能开启，确保Willow小树的图标变成了绿色的！hello fiddler.html文件的代码如下：此时我们在打开手机浏览器输入以后，不会再看到正常的百度首页，而是本地文件的hello fiddler.html测试页面了。再回到Fiddler左侧的流量包界面，我们可以看到命中的数据包被标注为黄色了。因此我们判断自己定义的规则是否生效，可以看看数据包是不是被标为黄色了。此外由于，Fiddler回包替换的规则支持正则表达式，所以有时写的规则不一定是完全正确的，大家要多检查下rule中设置规则。此外Fiddler还支持修改Host的功能，通过Willow插件可以一键修改，方法也是在Willow菜单下，右键点选一个project，选择Add Host，填写需要替换domain和ip地址即可。关于Fiddler的基本使用就介绍这些，至于断点调试等等，以后有机会再补充！运维帮是一个互联网技术分享平台南非蜘蛛微信运维帮技术社区定期举办技术沙龙，请关注订阅号获取最新信息。运维帮已开通多个微信群供大家交流学习，需要先加南非蜘蛛微信 （yunweibang008）后拉你入群。会员讨论群：总群1、总群2、云端技术地方讨论群：北京、上海、广州、深圳、杭州、成都软件讨论群：Nginx、Zabbix欢迎给订阅号投稿，同时也欢迎加入QQ技术讨论群运维帮(yunweibang)　
　文章为作者独立观点，不代表微头条立场
的最新文章
日至8日，全球AWS技术峰会北京站将在北京举办海量小文件问题成为了业界公认的难题。清华大学的老师做的科研跟运维有那么多关系？这次沙龙参会人员220人，天气比较热，很多朋友还是提前来到了会场。现场环境空间很大因礼品太多，在正式开始前先运维同学的苦你是否懂？重来分享下Redis Cluster该版本性能优于社区版MySQL 70%左右，可帮助中小企业和开发者提升数据运营能力微服务已成为当下最新的热门话题。用洪荒之力关注zabbix tools最后一次机会，千万别再错过实战的经验美好的回忆，未来再聚这一天我们已经等得太久，未来一定会更加精彩能让保险公司信赖的，一定是“双保险”。以server端为视角，从连接建立、 数据包接收和数据包发送这3条路径对参数进行归类梳理开源的 APM 系统 Naver，是不是比自己做的更漂亮？本文基于蜗牛从零开始建设运维自动化的一些实践Python 实现并行化高级玩法这两天在写bat脚本，这是一个痛苦的周末OP、SA、DBA、DEVOPS 、SRE、云工程师AutoCMS 是汽车之家目前正在使用的统一配置管理工具运维帮提供这本书的英文电子版，请关注运维帮订阅号，调整最下方为对话模式，然后回复sre获取PAM 的全称为“可插拔认证模块（Pluggable Authentication Modules）”建设运维自动化的一些实践OneProxy是平民软件完全自主开发的分布式数据访问层到底“全球敏捷运维峰会”是个什么来头？在某个寒冬的夜晚，当你躺在温暖的被窝里，这时清脆、悦耳的报警短信声接连不断的响起独立磁盘冗余阵列为了一个参数，刨根问底经过了alpha5、alpha6、beta1、beta2、rc1、rc2、rc3等版本的千锤百炼，Zabbiyunweibang互联网技术分享平台，分享的力量。热门文章最新文章yunweibang互联网技术分享平台，分享的力量。}