fiddler实用教程分析课件

Fiddler实用教程Kpxu部分内容节选自yunishi的文档：《Fiddler&Willow.pdf》、《如何使用Willow分析bug.pdf》特此感谢Fiddler实用教程Kpxu部分内容节选自yunishi的1目录Fiddler安装指南Fiddler工作原理应用案例用Fiddler实现hostmaker的功能跨环境测试IDCBUG定位和处理订好接口前后台同步开发模拟低网速断点调试HTTP请求实用小技巧附赠：Firebug

1.5调试技巧目录Fiddler安装指南2安装文件地址：\\paipaisrv\技术线共享\14_TOOLS\fiddler.7z说明必须要先安装.netFramework环境先安装Fiddler2betaSetup.exe文件willowSetup为fiddle的必选插件Fiddle安装指南安装文件地址：Fiddle安装指南3Fiddler安装指南需要使用Fiddler的时候需要一直开启软件。关闭时所有设置还原。Fiddler安装指南需要使用Fiddler的时候需要一直开4Fiddler工作原理Fiddler工作原理5Fiddler工作原理Fiddler工作原理6用Fiddler实现hostmaker的功能好处：不用重启或关闭浏览器，切换即用可以跟其他规则混用可以关闭指定某几条host缺点：不能自动更新，需要手动拷贝最新的host配置Hostmaker还是要保留着，用来获取最新的host配置应用案例----用Fiddler实现hostmaker的功能用Fiddler实现hostmaker的功能好处：应用案例-7应用案例----用Fiddler实现hostmaker的功能进入willow面板，右键添加一个project在添加好的projiect上选择Managehost，并在打开的窗口中贴入我们获取到的host列表。应用案例----用Fiddler实现hostmaker的功能8应用案例----用Fiddler实现hostmaker的功能应用案例----用Fiddler实现hostmaker的功能9应用案例----用Fiddler实现hostmaker的功能使用过程中，只要在project前面打上勾，这一组规则就会生效，刷新网页就可以使用。但如果同时勾上dev和beta时就会比较混乱，冲突的规则就会失效，这个要特别注意建议使用Fiddler前清空系统host里面的内容，免得出现冲突应用案例----用Fiddler实现hostmaker的功能10跨环境测试工作中经常出现这样的情况：dev环境在开发特性，但没有对应的数据存在，或者只有idc下才有数据可以用。比较频繁的像卖场活动等，数据都是直接在idc下生成，经常需要发到idc才能测试解决方案：启用当前环境的host规则把idc下的数据另存到本地，然后新建一条文件转向规则应用案例----跨环境测试跨环境测试工作中经常出现这样的情况：dev环境在开发特性，但11应用案例----跨环境测试找到要转向的请求，拖入到规则区域修改规则配置，去掉规则中的exact:以及路径后的时间戳,这个表示严格url匹配，在action中选择“findafile…”，并找到对应的文件应用案例----跨环境测试找到要转向的请求，拖入到规则区域12应用案例----跨环境测试找到要转向的请求，拖入到规则区域修改规则配置，去掉规则中的exact:以及路径后的时间戳,这个表示严格url匹配，在action中选择“findafile…”，并找到对应的文件应用案例----跨环境测试找到要转向的请求，拖入到规则区域13应用案例----跨环境测试保存获得如下配置：再次刷新页面后，这个指定的数据就会直接使用本地文件染色的请求表示该请求应用过规则应用案例----跨环境测试保存获得如下配置：14IDCBUG定位和处理Idcbug来得突然，我们需要在最短的时间内定位出问题原因并解决问题。但需要花很大的精力去配置环境造数据。如何做的更好？把出错的js文件指向到本地文件或者把idc的js下载下来，快速的调试定位。接口问题可以同样解决应用案例----IDCBUG定位和处理IDCBUG定位和处理Idcbug来得突然，我们需要在最短15订好接口前后台同步开发项目中很多特性都是前台依赖于后台的接口提供，如果在接口文档订下来以后两边能够同时开工，那么项目开发速度会大大提高，不用互相等待了。订好接口，前台开发人员根据接口文档的描述自己编写一份接口数据，然后用fiddler把请求直接转向到本地进行代码编写工作，能够及时的发现接口的不足、减少联调时的工作量应用案例----订好接口前后台同步开发订好接口前后台同步开发项目中很多特性都是前台依赖于后台的接口16模拟低网速用户电脑上bug频现，但我们怎么都重现不了，很多情况都是网速惹的祸。由于开发经验不足很多时候会导致代码中逻辑的时序控制上有缺陷，但在网速流畅的情况下刚好又是正常的。这种情况不少，调试自测的环节中加入低网速的模拟环节能大大提高我们代码的健壮性。应用案例----模拟低网速模拟低网速用户电脑上bug频现，但我们怎么都重现不了，很多情17应用案例----模拟低网速应用案例----模拟低网速18应用案例----模拟低网速在project中添加一条exten应用案例----模拟低网速在project中添加一条exte19应用案例----模拟低网速Match为匹配规则，可以写入正则表达式。简单使用的话就直接写一条url地址也可以。Action中的分别表示请求延时和响应延时，意思是每发送或者接收1k的数据延时100ms。最后一个空类似转向请求，可以不填。图片中的规则表示网页中的所有请求都延时，相当于每秒只能下载10k的数据应用案例----模拟低网速Match为匹配规则，可以写入正则20应用案例----模拟低网速下图的设置表示在dev下测试低网速时的访问情况应用案例----模拟低网速下图的设置表示在dev下测试低网速21断点调试HTTP请求有些错误埋藏得比较深，或者浏览器无法准确给出错误所在，这时我们需要先定位出错误范围。这里的断点不是传统上的代码断点，而是指http请求的断点，把某个请求中断掉停止加载断点分为：请求断点、相应断点应用案例----断点调试HTTP请求断点调试HTTP请求有些错误埋藏得比较深，或者浏览器无法准确22断点调试HTTP请求有些错误埋藏得比较深，或者浏览器无法准确给出错误所在，这时我们需要先定位出错误范围。这里的断点不是传统上的代码断点，而是指http请求的断点，把某个请求中断掉停止加载断点分为：请求断点、相应断点应用案例----断点调试HTTP请求断点调试HTTP请求有些错误埋藏得比较深，或者浏览器无法准确23应用案例----断点调试HTTP请求请求断点在向服务器发送请求前截获。响应断点在将结果返回给应用程序前截获，如果使用的是streamingmode则失效。应用案例----断点调试HTTP请求请求断点24应用案例----断点调试HTTP请求点击resumeall按钮进入下一个断点断点是分批断点的，即当前这一步引发的一系列请求，如一个网页请求返回后会立即发起一系列的css和js请求，这些为一批。当有很多图片的时候会根据浏览器的并发不同，每批会有4-8个图片请求被断点应用案例----断点调试HTTP请求点击resumeall25应用案例----断点调试HTTP请求点击resumeall按钮进入下一个断点断点是分批断点的，即当前这一步引发的一系列请求，如一个网页请求返回后会立即发起一系列的css和js请求，这些为一批。当有很多图片的时候会根据浏览器的并发不同，每批会有4-8个图片请求被断点应用案例----断点调试HTTP请求点击resumeall26应用案例----断点调试HTTP请求前面的都是全局性断点设置，可能在实际操作中会比较麻烦，我只希望加载到某一个js的时候断点。怎么办？我们可以进入命令行模式进行断点，图中黑色区域为命令区应用案例----断点调试HTTP请求前面的都是全局性断点设置27应用案例----断点调试HTTP请求当url中包含”pp.market”时请求断点清除断点：执行命令“bpu”即可应用案例----断点调试HTTP请求当url中包含”pp.m28应用案例----断点调试HTTP请求查看更多高级命令：执行命令help应用案例----断点调试HTTP请求查看更多高级命令：执行命29无敌快捷键这些快捷键相当实用，不用很亏！！Ctrl+X清空http请求列表Ctrl+Shift+X清空浏览器缓存，再也不用那么麻烦了（仅IE的缓存）选中http会话后有如下快捷键R重新发送一次当前请求U重新发送一次当前请求（无if-modified-since）D在整个列表中找到重复的请求（防止一个url反复使用）Fiddler小技巧----无敌快捷键无敌快捷键这些快捷键相当实用，不用很亏！！Fiddler小技30修改配色方案Fiddler默认的请求配色方案确实不咋滴，我们可以自己进行调整，总之看着舒服就行。Fiddler小技巧----修改配色方案修改配色方案Fiddler默认的请求配色方案确实不咋滴，我们31Fiddler小技巧----修改配色方案Fiddler小技巧----修改配色方案32Firebug1.5调试技巧在HTMLDOM发生变化时中断Firebug1.5调试技巧Firebug1.5调试技巧在HTMLDOM发生变化时中断33自动定位到产生变化的代码处Firebug1.5调试技巧自动定位到产生变化的代码处Firebug1.5调试技巧34Cookie值发生变化时中断Firebug1.5调试技巧Cookie值发生变化时中断Firebug1.5调试技巧35也可以条件断点，不过具体语法没研究过，应该是支持js代码的。比较悲剧的是我们所有的cookie操作都是用同一个函数来实现，这样代码断点都是在同一个位置。Firebug1.5调试技巧也可以条件断点，不过具体语法没研究过，应该是支持js代码的。36Firebug1.5调试技巧Firebug1.5调试技巧37Firebug1.5调试技巧Firebug1.5调试技巧38Firebug1.5调试技巧Firebug1.5调试技巧39Fiddler实用教程Kpxu部分内容节选自yunishi的文档：《Fiddler&Willow.pdf》、《如何使用Willow分析bug.pdf》特此感谢Fiddler实用教程Kpxu部分内容节选自yunishi的40目录Fiddler安装指南Fiddler工作原理应用案例用Fiddler实现hostmaker的功能跨环境测试IDCBUG定位和处理订好接口前后台同步开发模拟低网速断点调试HTTP请求实用小技巧附赠：Firebug

1.5调试技巧目录Fiddler安装指南41安装文件地址：\\paipaisrv\技术线共享\14_TOOLS\fiddler.7z说明必须要先安装.netFramework环境先安装Fiddler2betaSetup.exe文件willowSetup为fiddle的必选插件Fiddle安装指南安装文件地址：Fiddle安装指南42Fiddler安装指南需要使用Fiddler的时候需要一直开启软件。关闭时所有设置还原。Fiddler安装指南需要使用Fiddler的时候需要一直开43Fiddler工作原理Fiddler工作原理44Fiddler工作原理Fiddler工作原理45用Fiddler实现hostmaker的功能好处：不用重启或关闭浏览器，切换即用可以跟其他规则混用可以关闭指定某几条host缺点：不能自动更新，需要手动拷贝最新的host配置Hostmaker还是要保留着，用来获取最新的host配置应用案例----用Fiddler实现hostmaker的功能用Fiddler实现hostmaker的功能好处：应用案例-46应用案例----用Fiddler实现hostmaker的功能进入willow面板，右键添加一个project在添加好的projiect上选择Managehost，并在打开的窗口中贴入我们获取到的host列表。应用案例----用Fiddler实现hostmaker的功能47应用案例----用Fiddler实现hostmaker的功能应用案例----用Fiddler实现hostmaker的功能48应用案例----用Fiddler实现hostmaker的功能使用过程中，只要在project前面打上勾，这一组规则就会生效，刷新网页就可以使用。但如果同时勾上dev和beta时就会比较混乱，冲突的规则就会失效，这个要特别注意建议使用Fiddler前清空系统host里面的内容，免得出现冲突应用案例----用Fiddler实现hostmaker的功能49跨环境测试工作中经常出现这样的情况：dev环境在开发特性，但没有对应的数据存在，或者只有idc下才有数据可以用。比较频繁的像卖场活动等，数据都是直接在idc下生成，经常需要发到idc才能测试解决方案：启用当前环境的host规则把idc下的数据另存到本地，然后新建一条文件转向规则应用案例----跨环境测试跨环境测试工作中经常出现这样的情况：dev环境在开发特性，但50应用案例----跨环境测试找到要转向的请求，拖入到规则区域修改规则配置，去掉规则中的exact:以及路径后的时间戳,这个表示严格url匹配，在action中选择“findafile…”，并找到对应的文件应用案例----跨环境测试找到要转向的请求，拖入到规则区域51应用案例----跨环境测试找到要转向的请求，拖入到规则区域修改规则配置，去掉规则中的exact:以及路径后的时间戳,这个表示严格url匹配，在action中选择“findafile…”，并找到对应的文件应用案例----跨环境测试找到要转向的请求，拖入到规则区域52应用案例----跨环境测试保存获得如下配置：再次刷新页面后，这个指定的数据就会直接使用本地文件染色的请求表示该请求应用过规则应用案例----跨环境测试保存获得如下配置：53IDCBUG定位和处理Idcbug来得突然，我们需要在最短的时间内定位出问题原因并解决问题。但需要花很大的精力去配置环境造数据。如何做的更好？把出错的js文件指向到本地文件或者把idc的js下载下来，快速的调试定位。接口问题可以同样解决应用案例----IDCBUG定位和处理IDCBUG定位和处理Idcbug来得突然，我们需要在最短54订好接口前后台同步开发项目中很多特性都是前台依赖于后台的接口提供，如果在接口文档订下来以后两边能够同时开工，那么项目开发速度会大大提高，不用互相等待了。订好接口，前台开发人员根据接口文档的描述自己编写一份接口数据，然后用fiddler把请求直接转向到本地进行代码编写工作，能够及时的发现接口的不足、减少联调时的工作量应用案例----订好接口前后台同步开发订好接口前后台同步开发项目中很多特性都是前台依赖于后台的接口55模拟低网速用户电脑上bug频现，但我们怎么都重现不了，很多情况都是网速惹的祸。由于开发经验不足很多时候会导致代码中逻辑的时序控制上有缺陷，但在网速流畅的情况下刚好又是正常的。这种情况不少，调试自测的环节中加入低网速的模拟环节能大大提高我们代码的健壮性。应用案例----模拟低网速模拟低网速用户电脑上bug频现，但我们怎么都重现不了，很多情56应用案例----模拟低网速应用案例----模拟低网速57应用案例----模拟低网速在project中添加一条exten应用案例----模拟低网速在project中添加一条exte58应用案例----模拟低网速Match为匹配规则，可以写入正则表达式。简单使用的话就直接写一条url地址也可以。Action中的分别表示请求延时和响应延时，意思是每发送或者接收1k的数据延时100ms。最后一个空类似转向请求，可以不填。图片中的规则表示网页中的所有请求都延时，相当于每秒只能下载10k的数据应用案例----模拟低网速Match为匹配规则，可以写入正则59应用案例----模拟低网速下图的设置表示在dev下测试低网速时的访问情况应用案例----模拟低网速下图的设置表示在dev下测试低网速60断点调试HTTP请求有些错误埋藏得比较深，或者浏览器无法准确给出错误所在，这时我们需要先定位出错误范围。这里的断点不是传统上的代码断点，而是指http请求的断点，把某个请求中断掉停止加载断点分为：请求断点、相应断点应用案例----断点调试HTTP请求断点调试HTTP请求有些错误埋藏得比较深，或者浏览器无法准确61断点调试HTTP请求有些错误埋藏得比较深，或者浏览器无法准确给出错误所在，这时我们需要先定位出错误范围。这里的断点不是传统上的代码断点，而是指http请求的断点，把某个请求中断掉停止加载断点分为：请求断点、相应断点应用案例----断点调试HTTP请求断点调试HTTP请求有些错误埋藏得比较深，或者浏览器无法准确62应用案例----断点调试HTTP请求请求断点在向服务器发送请求前截获。响应断点在将结果返回给应用程序前截获，如果使用的是streamingmode则失效。应用案例----断点调试HTTP请求请求断点63应用案例----断点调试HTTP请求点击resumeall按钮进入下一个断点断点是分批断点的，即当前这一步引发的一系列请求，如一个网页请求返回后会立即发起一系列的css和js请求，这些为一批。当有很多图片的时候会根据浏览器的并发不同，每批会有4-8个图片请求被断点应用案例----断点调试HTTP请求点击resumeall64应用案例----断点调试HTTP请求点击resumeall按钮进入下一个断点断点是分批断点的，即当前这一步引发的一系列请求，如一个网页请求返回后会立即发起一系列的css和js请求，这些为一批。当有很多图片的时候会根据浏览器的并发不同，每批会有4-8个图片请求被断点应用案例----断点调试HTTP请求点击resumeall65应用案例----断点调试HTTP请求前面的都是全局性断点设置，可能在实际操作中会比较麻烦，我只希望加载到某一个js的时候断点。怎么办？我们可以进入命令行模式进行断点，图中黑色区域为命令区应用案例----断点调试HTTP请求前面的都是全局性断点设置66应用案例----断点调试HTTP请求当url中包含”pp.market”时请求断点清除断点：执行命令“bpu”即可应用案例--