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