先後端聯調之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，不斷地讓前端點擊按鈕發請求，他來打斷點，有時候我比較懶，就讓後端本身點，後端如何訪問前端開發機電腦上的代碼，來訪問本身電腦上的後端服務？ 這個問題你們能夠思考下，下期分享。。。