使用Fiddler web debugger 调试线上代码的方法
2016-09-14 10:24
381 查看
大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码.
虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却远远不够用.
特别是当产线环境不能随意修改文件情况下,用线上环境来调试本地代码更是迫切的需求.
(往往本地测试通过,上线后却是各种bug.)
今天分享一下如何用Fiddler来修改并调试线上的JS代码.
以博客园首页为例子,用我本地的一个js文件来替换它的一个js.
查看首页源码发现一个js,就拿它开刷了.
打开fiddler,捕获博客园的首页请求. 找到“aggsite.js”的请求.
这里有个技巧,可以通过 “select”命令来筛选js请求. 在下面的命令框输入“select script”回车即可. 如下图.
接着把这个请求拖动到“AutoResponder”面板.
拖动之前记得先勾上 “Enable automatic responses”和 “Permit passthrough for unmatched requests”.
然后在Rule Editor的第二下拉框选择 “Find a file”来选择本地的JS文件, 选择后点 Save.
这里我用本地的“test fiddler.js”来替换博客园首页的“aggsite.js”.
“test fiddler.js”内容如下. 就是向body追加一段红色文字.
好了,刷新博客园首页看看效果.
可以看到,我们替换的js被执行了,接下来就可以在本地使用我们顺手的编辑器来写JS代码了,
本地保存后,刷新网页就能立刻看到效果,就跟在本地开发一样,是不是很方便?
最后想说其实你可以用同样的方式来替换图片,CSS,HTML.
总之一点就是利用线上的环境来测试你的代码,但又不对线上产生影响.
要知道保证不出onlinebug bug是多么的重要,虽然很难做到,但能避免就尽量吧.
Enjoy!
虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却远远不够用.
特别是当产线环境不能随意修改文件情况下,用线上环境来调试本地代码更是迫切的需求.
(往往本地测试通过,上线后却是各种bug.)
今天分享一下如何用Fiddler来修改并调试线上的JS代码.
以博客园首页为例子,用我本地的一个js文件来替换它的一个js.
查看首页源码发现一个js,就拿它开刷了.
打开fiddler,捕获博客园的首页请求. 找到“aggsite.js”的请求.
这里有个技巧,可以通过 “select”命令来筛选js请求. 在下面的命令框输入“select script”回车即可. 如下图.
接着把这个请求拖动到“AutoResponder”面板.
拖动之前记得先勾上 “Enable automatic responses”和 “Permit passthrough for unmatched requests”.
然后在Rule Editor的第二下拉框选择 “Find a file”来选择本地的JS文件, 选择后点 Save.
这里我用本地的“test fiddler.js”来替换博客园首页的“aggsite.js”.
“test fiddler.js”内容如下. 就是向body追加一段红色文字.
$(function(){ var p=$("<p/>").text("这是fiddler加上的JS").css("text-align","center").css("color","red"); $("body").prepend(p); });
好了,刷新博客园首页看看效果.
可以看到,我们替换的js被执行了,接下来就可以在本地使用我们顺手的编辑器来写JS代码了,
本地保存后,刷新网页就能立刻看到效果,就跟在本地开发一样,是不是很方便?
最后想说其实你可以用同样的方式来替换图片,CSS,HTML.
总之一点就是利用线上的环境来测试你的代码,但又不对线上产生影响.
要知道保证不出onlinebug bug是多么的重要,虽然很难做到,但能避免就尽量吧.
Enjoy!
相关文章推荐
- java 学习
- Mybatis 自动生成代码工具--mybatis-gennerator插件
- VC++ 提高C++程序运行效率10个简单方法(其他语言程序参考)
- DotNetTextBox V6.0.10 商业版源码提供下载
- maven spring jdk8 jmokit junit4 test4j 测试解决冲突问题
- C# enum 添加字符串(中文)标记
- go lang 数组初探
- 操作集合的工具类:Collections
- Spring注解@Resource和@Autowired区别对比
- RandomStringUtils工具类
- Java中的三种代码块详解
- java性能优化笔记 java程序优化
- SpringMVC ResponseBody返回字符串(JSON)乱码
- Java设计模式-单例模式
- Spring bean 实现初始化、销毁方法的方式及顺序
- java集合框架系列---Map接口
- java中使用数组和链表简单实现SJBMap
- spring事物几种方式
- spring boot调用SAP RFC
- Java中的8大常用排序算法。