本人还算喜欢看书JavaScript的相关书看过一些书本上总能看见对JavaScript类似的评语或者评价 -“JavaScript调试困难”。可是事实却是随着互联网行业的的飞速发展JavaScript调试难的问题已不像早年那样麻烦了这里先不说各种IDE对JavaScript强力的支持刚好因为工作需要需要调试产品在主流浏览器中兼容问题所以乘机做了点功课来为大伙介绍这个在前端开发过程中异常给力的工具。2.第一次已介绍一款软件为目的写文章希望大家看完文章能有收获。而且说到底这个也是一个工具大家如果有用过更好的调试工具也欢迎推广一下大家好才是真的好哈哈。3.这款工具本人已经使用快两年时间了在实际工作确实得到不少帮助所以虽然已有介绍此工具的文章还是决定自己写一篇让更多的朋友了解这个工具。4.这个月对本人来说是一个崭新的开始新的生活新的工作新的环境...上个月发生了太多太多事情好事坏事烦心事感觉一切都很漫长不过坚持过后更加坚定自己努力的决心自己强大起来才是硬道理。5.文章的前部分介绍工具的具体细节后部分介绍工具的使用技巧和具体的方法针对个人需求选择阅读。6.欢迎转载不过请注明出处谢谢。Fiddler是啥百度百科里是这样介绍它的 - “Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求允许你监视设置断点甚至修改输入输出数据fiddler包含了一个强大的基于事件脚本的子系统并且能够使用.net框架语言扩展。”所以无论你是从事什么开发哪种语言只要你想了解HTTP这个工具就值得你去了解而且更重要的一点这个工具是免费的。Fiddler就是以代理服务器的方式监听系统的网络数据流动。启动Fiddler后所发生的网络数据流通过Fiddler进行中转就可以看到HTTP/HTTPS数据流的信息我们就可以通过对这些信息加以分析。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具对前端开发工作很有价值。Fiddler的安装与下载Fiddler下载地址http://www.fiddler2.com/fiddler2/假如你是早期的XP版本的系统在安装的过程中会提示你下载.net framework 2.0或以上版本 。安装过程很简单就不介绍了。Fiddler的使用界面和功能介绍监听开关 - 只有两种状态用的时候就开着不用就让丫休息。capturing表示捕捉状态监听类型 - 四种状态分别对应 监听所有请求监听浏览器请求监听非浏览器请求和全部隐藏(Hide All)命令行 - 就不作介绍了难者不会会者不难。我就属于前者悲剧呀...请求列表 - 请求列表的信息分别有 结果Result协议Protocol主机名Host网页地址URL内容大小Body缓存Caching响应的HTTP内容类型Content-Type请求所运行的程序Process注释Comments自定义Custom请求相关信息 - 右边这一大片都是数据流的相关信息的查看器这些查看器提供很多查看形式可以查看数据流的内容。Fiddler请求列表的icon对应具体的数据类型和状态其含义是Fiddler请求相关信息对应的主要功能工具最右方的是请求相关信息的查看器提供了数据多方面的查看方式。想了解看图片。统计资料信息(Statistics)强大的检查器(Inspectors) - 功能很多等待你慢慢挖掘。时间轴(Timeline)自动回复器(autoResponder) - 一会就是介绍它的具体使用方法说说我在工作中为什么使用Fiddler如何使用Fiddler。前端工程师在工作中总会有那么一些要求要求书写的代码具有优良的兼容性要求考虑代码的高性能要求方法要面向对象要求...前端工程师总是和浏览器兼容有很多不得不说的事。条件1在我们前端工程师开发的工作中要调试服务器上某个HTML/CSS/JavaScript文件。一般情况下我们都是将文件直接进行修改然后重新发布再去做验证这样就容易影响到测试环境或者生成环境的稳定性。更好的做法是我们在本地开发环境中直接修改文件并进行验证然后发布到测试环境这样能保证测试环境的稳定可是又比较繁琐。条件2现在我的情况是需要调试上线产品的浏览器兼容性问题且我没有本地环境或者生成环境去测试。假如有Bug发生在Firefox或者Chrome这种有控制台支持调试的浏览器下一切都好说可是假如bug只发生在遨游TT世界之窗搜狗...这种的没有调试功能的浏览器下而且你还碰见了我目前的情况那么如果没有Fiddler这种工具只能说这就是一场灾难。Fiddler工具可以修改HTTP数据的特性我们就非常便捷地基于生产环境修改并验证确认后再发布。第一步先定位调试文件且下载。假设发现页面中的某个文件有问题HTML/CSS/JavaScript都行那么我们需要做的是就把他先下载到本地如果本地有这个本地那么可以跳过此步骤下载到本地的文件偶尔会有乱码的情况建议你先清理浏览器缓存或者调整注册表Fiddler2中文乱码问题。使用细节如下第二步Fiddler - autoResponder出场开启此功能。打开AutoResponder标签设置。可以看到界面上有三个选择框第一个的作用是开启或禁用自动重定向功能我们就可以在下面添加重定向规则了第二个选择框被勾上时不匹配的请求可以通过不影响那些没满足我们处理条件的请求。