[实践OK]文件替换特别在排查线上Js错误时相当有用---Fiddler2插件Extensions,Fiddler使用教程分享。

jackxiang 2013-7-19 14:21 | |

Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,甚至修改输入输出数据,fiddler包含了一个强大的基于事件脚本的子系统,并且能够使用.net框架语言扩展。(Fiddler使用教程)

Fiddler2 Extensions
Fiddler2扩展程序,下面软件使用前需要安装Fiddler2.
Syntax-Highlighting Addons:http://fiddler2.com/docs/default-source/public-downloads/fiddlersyntaxsetup.exe
代码高亮显示软件
JavaScript Formatter:http://fiddler2.com/docs/default-source/public-downloads/FiddlerJSFormatSetup.exe
JavaScript的排版显示
Traffic Differ:http://fiddler2.com/docs/default-source/public-downloads/fiddlersazdiffsetup.exe
RulesTab
一个演示
Fiddler2 3rd-Party Extensions
Fiddler2.3扩展程序,下面软件使用前需要安装Fiddler2.

Watcher - Passive Security Auditor
用于Web网络安全检测的软件,
x5s - Automated XSS Security Testing Assistant
XSS一款安全检测的软件,
intruder21
检测网站负载的软件
Chad Sowald's Request-To-Code
可以将HTTP Request 转换成C# 代码,简单易用。
JSON Viewer / Inspector (with Source)
基于.net构建的JSON数据查看工具,支持VS,让难以阅读JSON代码阅读起来。
XML Request Viewer / Inspector ( TangoXmlView Fiddler Inspector )

前腾讯Qzone兄弟的分享DownLoad:  
这儿也可以下载:http://ishare.iask.sina.com.cn/f/9753378.html  这玩意当时不是不让外流么,呵呵。

以上摘录来自:http://www.e800.com.cn/articles/2011/0311/480265.shtml

Fiddler使用教程:http://tech.e800.com.cn/articles/2011/38/1299572666298_1.html

附录(这个在调试线上bug时非常有用,上面的附件里兄弟也是这么来实践的):
在日常开发工作中,有时侯会发现测试环境中某个html/css/javascript文件有问题。 我们利用Fiddler可以修改HTTP数据的特性,非常方便的定位问题并进行验证。
                        http://mccxj.github.io/blog/20130531_introduce-to-fiddler.html
摘录:
第一步:使用Fiddler查看页面的数据流列表,找到js文件保存到本地
第二步:创建重定向规则,使用本地文件
第三步:刷新页面,如果看到灰色背景的请求会话,就表示生效了
第四步:修改本地文件,进行测试
以上的操作如下图:
点击在新窗口中浏览此图片
————————————————————————————
修改替换如是以当前请求作小修改,可直接保存,步骤如下:
1)在Fiddler2中选中所要替换的Url后右键,选中save。
2)从save中选:Request--->Request Body...
3)保存为自己上面配置好的默认读取替换的文件名字即可。
特别注意:在保存在fiddler2某个url上点右键时注意,要选:Decode Selected Sessions....,否则保存出来的是乱码喔。
————————————————————————————
有时查错时,故意降低网速也是一种不错的办法,尤其是IE6.0的相关dom错误。

修改本地文件之后,重新刷新页面,就可以看到修改后的效果了。 这种调试方式不需要发布到线上再验证,避免了修改不成功、对用户造成影响的风险, 而且不需要搭建复杂的开发服务器等开发环境,非常适合快速web调试。

最后,笔者介绍的就是willow可以实现文件夹的整个目录替换(好像有扩展支持正则什么的就复杂了),值得学习和实践。
文件夹替换Willow插件。

记得当时还有一个兄弟分享了fiddler2下的JFV插件实现对js函数调用流程及耗时作了统计,是不错的插件(当时没有写成dll的fiddler2扩展格式,后才写了,给过我一份。),安装的方法也贴这儿:
JFV插件安装步骤:
1. 确保您安装了版本号不低于2.2.4.0的Fiddler;
2. 将jfv.dll和jfv_config.xml文件解压到X:\\Program Files\Fiddler2\Scripts\ ;
3. 手动修改jfv_config.xml内容(此步骤也可以在Fiddler启动后进行,配置实时更新生效;配置后续改为可视化的);
4. 启动(重启)Fiddler,关闭Stream模式,先清一遍浏览器cache,然后打开你想要监控的网页,JFV就开始运行了;

JFV使用小贴士:
· 显示监控结果,可点击Redraw按钮;
· Function called数量过多(如10000+)时,可去掉Show return和Show extra info选项,以加快结果展示速度;
· 其它帮助信息可参阅Console上的?按钮,JFV的快捷键 及 JFV小技巧&提示(注意此帮助内容为v1.0,暂未更新,引入JFV部分可忽略)

有bug或建议请及时反馈:
RTX : leohe
Email : justrunstudio@gmail.com


------------------------------------------------------------

1)fiddler2模拟Get/Post请求之composer:
Headers:
Content-type: application/x-www-form-urlencoded

Request Body:(填入你想要填写的POST内容)
test=test

点击 Execute执行模拟请求,
注意:必须要填写Headers:Content-type: application/x-www-form-urlencoded
否则会出现Post参数提交失败。

参考:http://hi.baidu.com/helww/item/5a5c17dfdc32c9312a35c723
http://blog.sina.com.cn/s/blog_6554140d0100zu57.html

2)模拟多次请求,如并发100次,用Filddler来模拟一次或者多次不同的浏览器页面请求的方法:
http://www.jackxiang.com/post/4605/

作者:jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
地址:http://jackxiang.com/post/6535/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!


最后编辑: jackxiang 编辑于2013-9-18 16:50
评论列表
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]