1. 程式人生 > >工具 | 代碼調試利器fiddle介紹

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

黃色 格式 顯示 bsp 求和 打開 pos ctr gif

我們開發的系統運行在用戶的環境上,為了保護我們的代碼和提升性能,前端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介紹