我們開發的系統運行在用戶的環境上，為了保護我們的代碼和提升性能，前端javascript是經過壓縮的。壓縮的代碼難於定位，當前只有chrome對壓縮的代碼支持格式化，但是變量和函數簡化後，定位依然困難。

使用fiddle可以在不替換環境javascript/CSS的情況下，使用本地未壓縮javascript/CSS實現代碼的調試。下面是我在開發中經常使用的功能，分享給大家。

1. fiddle的配置

   安裝fiddle後，選中Tools下的如下菜單：

   

在打開的對話框中，勾選如下兩項：

2. 讓本地代碼替換服務器上的代碼。如下圖增加一個或對個Rule，即可實現對本地代碼的調試

3. 清空左側會話欄中的所有會話，使用 ctrl + x

4. 只攔截某個進程的會話。比如只攔截chrome的會話，拖動Any Process到chrome窗口中即可。

5.拖動一個會話，到右側的Composer窗口，點擊Execute可以再次執行該會話

6. 在不熟悉代碼的時候，通過查詢返回結果的值，快速定位到那個請求返回的結果。Ctrl +F, 搜索後黃色高亮顯示

7. 在inspectors頁簽可以看到格式化好的json請求和響應

8. 停止、恢復攔截請求，點擊左下角的狀態即可完成切換。Capturing代表正在攔截。當放置一段時間，攔截失效的情況下，也可以重新點擊下這裏，再次啟動攔截會話。

結束。

工具 | 代碼調試利器fiddle介紹