工具 | 代码调试利器fiddle介绍

Posted 2020-10-08

我们开发的系统运行在用户的环境上，为了保护我们的代码和提升性能，前端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代表正在拦截。当放置一段时间，拦截失效的情况下，也可以重新点击下这里，再次启动拦截会话。

 

 

    结束。