fiddler实用教程分析课件.pptx

1、Fiddler实用教程Kpxu部分内容节选自yunishi的文档： Fiddler&Willow.pdf 、如何使用Willow分析bug.pdf 特此感谢目录 Fiddler安装指南 Fiddler工作原理 应用案例 用Fiddler实现hostmaker的功能 跨环境测试 IDC BUG定位和处理 订好接口前后台同步开发 模拟低网速 断点调试HTTP请求 实用小技巧 附赠：Firebug 1.5调试技巧 安装文件地址： paipaisrv技术线共享14_TOOLSfiddler.7z 说明 必须要先安装.net Framework环境 先安装Fiddler2betaSetup.exe文件

2、willowSetup为fiddle的必选插件Fiddle安装指南Fiddler安装指南 需要使用Fiddler的时候需要一直开启软件。关闭时所有设置还原。Fiddler工作原理Fiddler工作原理用Fiddler实现hostmaker的功能 好处： 不用重启或关闭浏览器，切换即用 可以跟其他规则混用 可以关闭指定某几条host 缺点： 不能自动更新，需要手动拷贝最新的host配置 Hostmaker还是要保留着，用来获取最新的host配置应用案例-用Fiddler实现hostmaker的功能应用案例-用Fiddler实现hostmaker的功能 进入willow面板，右键添加一个proje

3、ct 在添加好的projiect上选择Manage host，并在打开的窗口中贴入我们获取到的host列表。应用案例-用Fiddler实现hostmaker的功能应用案例-用Fiddler实现hostmaker的功能 使用过程中，只要在project前面打上勾，这一组规则就会生效，刷新网页就可以使用。但如果同时勾上dev和beta时就会比较混乱，冲突的规则就会失效，这个要特别注意 建议使用Fiddler前清空系统host里面的内容，免得出现冲突跨环境测试 工作中经常出现这样的情况：dev环境在开发特性，但没有对应的数据存在，或者只有idc下才有数据可以用。 比较频繁的像卖场活动等，数据都是直接

4、在idc下生成，经常需要发到idc才能测试 解决方案： 启用当前环境的host规则 把idc下的数据另存到本地，然后新建一条文件转向规则应用案例-跨环境测试应用案例-跨环境测试 找到要转向的请求，拖入到规则区域修改规则配置，去掉规则中的exact:以及路径后的时间戳,这个表示严格url匹配，在action中选择“find a file”，并找到对应的文件应用案例-跨环境测试 找到要转向的请求，拖入到规则区域修改规则配置，去掉规则中的exact:以及路径后的时间戳,这个表示严格url匹配，在action中选择“find a file”，并找到对应的文件应用案例-跨环境测试 保存获得如下配置： 再

5、次刷新页面后，这个指定的数据就会直接使用本地文件 染色的请求表示该请求应用过规则IDC BUG定位和处理 Idcbug来得突然，我们需要在最短的时间内定位出问题原因并解决问题。但需要花很大的精力去配置环境造数据。如何做的更好？ 把出错的js文件指向到本地文件或者把idc的js下载下来，快速的调试定位。 接口问题可以同样解决应用案例-IDC BUG定位和处理订好接口前后台同步开发 项目中很多特性都是前台依赖于后台的接口提供，如果在接口文档订下来以后两边能够同时开工，那么项目开发速度会大大提高，不用互相等待了。 订好接口，前台开发人员根据接口文档的描述自己编写一份接口数据，然后用fiddler把请

6、求直接转向到本地进行代码编写工作，能够及时的发现接口的不足、减少联调时的工作量应用案例-订好接口前后台同步开发模拟低网速 用户电脑上bug频现，但我们怎么都重现不了，很多情况都是网速惹的祸。 由于开发经验不足很多时候会导致代码中逻辑的时序控制上有缺陷，但在网速流畅的情况下刚好又是正常的。这种情况不少，调试自测的环节中加入低网速的模拟环节能大大提高我们代码的健壮性。应用案例-模拟低网速应用案例-模拟低网速应用案例-模拟低网速 在project中添加一条exten应用案例-模拟低网速 Match为匹配规则，可以写入正则表达式。简单使用的话就直接写一条url地址也可以。 Action中的分别表示请求

7、延时和响应延时，意思是每发送或者接收1k的数据延时100ms。最后一个空类似转向请求，可以不填。 图片中的规则表示网页中的所有请求都延时，相当于每秒只能下载10k的数据应用案例-模拟低网速 下图的设置表示在dev下测试低网速时的访问情况断点调试HTTP请求 有些错误埋藏得比较深，或者浏览器无法准确给出错误所在，这时我们需要先定位出错误范围。 这里的断点不是传统上的代码断点，而是指http请求的断点，把某个请求中断掉停止加载 断点分为：请求断点、相应断点应用案例-断点调试HTTP请求断点调试HTTP请求 有些错误埋藏得比较深，或者浏览器无法准确给出错误所在，这时我们需要先定位出错误范围。 这里的

8、断点不是传统上的代码断点，而是指http请求的断点，把某个请求中断掉停止加载 断点分为：请求断点、相应断点应用案例-断点调试HTTP请求应用案例-断点调试HTTP请求 请求断点 在向服务器发送请求前截获。 响应断点 在将结果返回给应用程序前截获，如果使用的是streaming mode则失效。应用案例-断点调试HTTP请求 点击resume all按钮进入下一个断点 断点是分批断点的，即当前这一步引发的一系列请求，如一个网页请求返回后会立即发起一系列的css和js请求，这些为一批。 当有很多图片的时候会根据浏览器的并发不同，每批会有4-8个图片请求被断点应用案例-断点调试HTTP请求 点击re

9、sume all按钮进入下一个断点 断点是分批断点的，即当前这一步引发的一系列请求，如一个网页请求返回后会立即发起一系列的css和js请求，这些为一批。 当有很多图片的时候会根据浏览器的并发不同，每批会有4-8个图片请求被断点应用案例-断点调试HTTP请求 前面的都是全局性断点设置，可能在实际操作中会比较麻烦，我只希望加载到某一个js的时候断点。怎么办？ 我们可以进入命令行模式进行断点，图中黑色区域为命令区应用案例-断点调试HTTP请求 当url中包含”pp.market”时请求断点 清除断点：执行命令“bpu”即可应用案例-断点调试HTTP请求 查看更多高级命令：执行命令help无敌快捷键

10、这些快捷键相当实用，不用很亏！ Ctrl+X 清空http请求列表 Ctrl+Shift+X 清空浏览器缓存，再也不用那么麻烦了（仅IE的缓存） 选中http会话后有如下快捷键 R 重新发送一次当前请求 U 重新发送一次当前请求（无if-modified-since） D 在整个列表中找到重复的请求（防止一个url反复使用）Fiddler小技巧-无敌快捷键修改配色方案 Fiddler默认的请求配色方案确实不咋滴，我们可以自己进行调整，总之看着舒服就行。Fiddler小技巧-修改配色方案Fiddler小技巧-修改配色方案Firebug1.5调试技巧 在HTML DOM发生变化时中断Firebug1.5调试技巧 自动定位到产生变化的代码处Firebug1.5调试技巧 Cookie值发生变化时中断Firebug1.5调试技巧 也可以条件断点，不过具体语法没研究过，应该是支持js代码的。 比较悲剧的是我们所有的cookie操作都是用同一个函数来实现，这样代码断点都是在同一个位置。Firebug1.5调试技巧Firebug1.5调试技巧Firebug1.5调试技巧Firebug1.5调试技巧