先后端联调之Fiddler工具--to前端to测试to后端

前言

如今的大型项目基本先后端分离；前端不只仅只是负责界面，交互了；须要作的工做愈来愈多，可是都离不开和各个部门的沟通协做，这样才能高效率；最为密切的就是后端了，今天就简单的分享下在项目实战过程当中用到的利器--fiddle工具；

不就是fiddle嘛，抓包工具嘛，NO,NO,NO......

Fiddler是最强大最好用的Web调试工具之一，它能记录全部客户端和服务器的http和https请求，容许你监视，设置断点，甚至修改输入输出数据，Fiddler包含了一个强大的基于事件脚本的子系统，而且能使用.net语言进行扩展

你对HTTP 协议越了解， 你就能越掌握Fiddler的使用方法. 你越使用Fiddler,就越能帮助你了解HTTP协议.

---

轻描淡写-介绍下fiddle

先贴一个官网地址：fiddle官网 至于怎么形容他： The free web debugging proxy for any browser, system or platform 抓包、调试、代理、各类很强大的功能

1. 不费话了，开始干活 下载，一路next就能够安装好；ok，将看到这个界面

左边列表就是捕获到的全部请求，不妨随便百度一下，就能看到你百度的请求；

这个是我点击百度搜索框，触发的请求，右边webform中能够看到这个请求的内容，下边的JSON是服务器返回的内容；很清晰，一目了然。

fiddler工具的基本使用能够参考官网文档或者慕课网有视频教程；

只有我才能带领大家走向胜利

To 测试妹子

对于测试来讲，如上所示，分析请求，定位是前端仍是后端的问题，检验界面与数据是否一致，有时候出现神奇问题，要么是逻辑问题，要么是界面和数据不一致形成的，精准定位问题，精准发锅；

To 大前端

fiddler不仅是具备简单的抓包功能，在他的社区有不少的插件，使他的能力发挥到极致； 详细介绍下项目中经常使用的一个神器 Willow--Fiddler的插件，提供重定向和host主机等功能,三秒钟解决联调、跨域问题，没错就是三秒. 贴一个下载地址： fiddler2 + willow 下载 密码：o3lg fiddler4 + willow 下载 密码：kf8p 安装fiddler后安装插件 willow,willow若是安装失败，请尝试右键使用 管理员身份打开；安装好后会在右边看到一个绿色的小图标，ok，点击他；

核心内容

---

问题现状： 咱们的项目一般开发时都跑在本地服务下，通常是127.0.0.1:8080,若是咱们但愿本地代码的服务可以正常访问后端，或者访问到测试机的真实数据，这就跨域了，由于本地和后端或者测试的都不在一个域名下，是没法访问到数据的，一般的作法是启动一个Nginx服务来进行转发，这一个过程很麻烦，配置改来改去，并且若是要作到，代码修改实时看到效果，那就更复杂了。。。

**解决方案： ** 个人作法是： 将本地服务127.0.0.1代理到某个域名好比www.cloud.com,这时候访问这个域名就能看到本身的项目了，这个域名下也是木有后端或者测试机的接口的，怎么办了，继续代理转发，将域名下全部的接口代理到真实的IP下，好比后端或者测试机接口的服务在 10.50.12.24:8088下，那咱们就将www.cloud.com/order[order是后端接口固定的项目名，每一个接口都在这个目录下]指向10.50.12.24:8088下，完美解决；

顺着这个思路3步解决，

1. 在willow中添加项目快捷键ctrl+p；
2. 添加host代理ctrl + o;
3. 添加指向add exten ctrl + n;

不懂的童鞋看图

图一：

图二：

好了能够开心的联调代码了； ps： 这个checkbox框框表示是否启用，若是想去掉，点掉就行了；比手动去修改host方便多了；

To 后端

后端大侠有时候想这么干，用测试机的前端代码，来访问本身本地的服务，这样就不用浪费前端童鞋的资源了，测试机上本身测试； 这个步奏其实就是上面的逆过程，简单多了，测试机的前端代码天然指向测试机的后端代码，使用上面思路的第三步；添加指向，指向本机，这里要注意两个点：

1. 直接代理接口www.cloud.com/order --> 本地服务+端口
2. 若是是https的，须要后端给tomcat配置https证书

介绍就先到这里了，更多使用技巧，后续在更新。。。 第一次写分享，欢迎 issues，若是以为有帮助点个赞

后记

后端某个功能bug，不断地让前端点击按钮发请求，他来打断点，有时候我比较懒，就让后端本身点，后端如何访问前端开发机电脑上的代码，来访问本身电脑上的后端服务？ 这个问题你们能够思考下，下期分享。。。