今天介紹一個本人認爲超級實用的本地調試服務器端代碼方法。
在實際web開發中，經常面臨的問題就是，明明本地調試正確，放到服務器上卻出了bug，而使用瀏覽器F12進行的js調試刷新後纔會生效，我們不可能改動一次js文件就上傳到服務器一次重新看一次效果。如果你也時常有這個疑問，那繼續往下看。
需要用到的抓包工具是：Fiddler。
fiddler 這個工具，在 web 開發中，用法非常多，本篇文章只涉及到使用fiddler對前端資源的劫持和本地調試。
先簡單說一下 fiddler 的工作原理，見下圖：
在本地機器與服務器建立連接的時候，fiddler 可以在中間建立一層代理，所以我們可以用這個代理，把服務器上的一些請求進行劫持，來達到一些測試和調試的目的。
一個很直觀的例子就是，如果本地開發環境中寫了一個 JS 腳本文件，在生產環境中使用是此文件的壓縮版本。如果本地並沒有發生報錯之類的問題，而線上的生產環境上報錯了，我們如何進行調試？畢竟把線上的壓縮版 JS 換成未壓縮版既麻煩又不現實。所以這個時候，我們可以用 fiddler 把線上的資源，劫持爲本地的文件，每次請求在線資源的時候，fiddler
會替換這個應答爲本地指定的文件，從而方便我們聯機調試。這樣你可以一邊修改本地文件，一邊刷新線上的頁面，達到調試的目的。
1.首先查看 F12，先找到相應頁面的源碼地址，找到那個要替換的 JS 文件 URL（或者可以直接刷新頁面，在fiddler左側資源框中找到要調試的JS文件）
2.打開 fiddler，在右側，切換到 AutoResponder 這個標籤，勾選下面的“Enable rules”、“Unmatched requests passthrough” 兩個選項，然後點一下 Add Rule 添加一條規則
3.在下面的 Rule Editor 中的第一行，填上你要劫持的線上的資源的 URL，下面一個輸入框，輸入一個本地文件的路徑，然後點擊右側的 Save 按鈕保存。這個時候，中間的規則框裏就多了一條規則。然後刷新你的瀏覽器，可以看到資源被劫持了，你可以聯機進行調試什麼的。
要注意的是：fiddler 默認把系統的代理設置爲了 127.0.0.1:8888，端口可以在 Tools → Options → Connections 裏面修改。如果你使用 Chrome 或者 Firefox，你的瀏覽器代理並不是使用的系統設置，而是由第三方插件管理的話（如 Proxy SwitchyOmega 等），請自行設置瀏覽器使用 fiddler 時的代理爲 127.0.0.1:8888，不然會造成請求劫持失敗。
fiddler 的功能非常強大，遠不止這一個功能，而且它能劫持的基本是所有本機聯網程序的請求，強大功能自行腦補。
特別補充說明：
在使用了Fiddler之後，可能會出現瀏覽器不能上網但是qq微信可正常使用的情況，Fiddler的工作原理就是內建一個代理，作爲客戶端和網絡的中介。在Fiddler啓動後，會自動添加一個 IP 爲127.0.0.1（迴路）端口號爲8888的系統代理。但是有一個問題就是 Fiddler退出後，默認情況下並不會刪除這個配置。那麼就導致了，一些瀏覽器還是指向這個代理，但是這個代理由於Fiddler已經關閉，所以其不會在起作用。所以某些瀏覽器或是其他的東西可能再開機後無法打開網頁，而QQ微信可以正常使用。
解決辦法：打開Internet選項，點擊局域網設置，去掉勾選“爲LAN使用代理服務器”即可。
