下面就是今天推薦的閃閃發光的工具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：很多事情看起來可能有些難度，聽起來也很牛逼的樣子，但是當我們親身接觸一下，研究一下，發現，沒想象的那麼難。當然要相信牛逼的值得我們學習的東西永遠都是存在的。