首页 > 其他 > 详细

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

时间:2017-07-29 00:47:36      阅读:211      评论:0      收藏:0      [点我收藏+]

我们开发的系统运行在用户的环境上,为了保护我们的代码和提升性能,前端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介绍

原文:http://www.cnblogs.com/webstudyroom/p/7253033.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!