适应读者
FE研发工程师
对fiddler有基本了解的的同学
对web性能优化感兴趣的同学
本文不会讲太多fiddler基本概念,基本用法,以及安装步骤,所以希望知道以上知识的同学,请在fiddler的官方网站上去了解,官方网站http://www.fiddler2.com/fiddler2/。
什么是fiddler
为了开一个头,还是先简单介绍下fiddler:
Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,甚至修改输入输出数据,fiddler包含了一个强大的基于事件脚本的子系统,并且能够使用.net框架语言扩展。更多详细的信息我们可以在fiddler的官方网站上去了解,http://www.fiddler2.com/fiddler2/,上面详细介绍了fiddler的用法与扩展。
我们为什么要限速
限速对于web前端研发是非常重要的,由于开发者的机器一般配置都很高,并且是在localhost下来调试程序,所以很难模拟到用户的真实使用情况,如正在下载js,css等静态资源的时候,页面的一个渲染情况。当网速很慢的时候,我们更希望看到的是先渲染出用户界面,而不是让用户看到一片空白。那么这个时候,网络限速就能很方便在localhost针对类似的情况来做性能调试与优化。
fiddler模拟限速的原理
我们可以通过fiddler来模拟限速,因为fiddler本来就是个代理,它提供了客户端请求前和服务器响应前的回调接口,我们可以在这些接口里面自定义一些逻辑。Fiddler的模拟限速正是在客户端请求前来自定义限速的逻辑,此逻辑是通过延迟发送数据或接收的数据的时间来限制网络的下载速度和上传速度,从而达到限速的效果。
那么我们的算法就是 1000/下载速度 = 需要delay的时间(毫秒),比如50kb/s 需要delay200毫秒来接收数据。
通过fiddler-script模拟限速
Fiddler-script是fiddler的提供的一个强大的子脚本系统,这个系统可以调用fiddler的接口来完成开发者自定义的功能。
我们可以在fiddler-script提供的OnBeforeRequest方法里增加以下两句代码:
1 // Delay sends by 300ms per KB uploaded.
2 oSession["request-trickle-delay"] = "300";
3 // Delay receives by 150ms per KB downloaded.
4 oSession["response-trickle-delay"] = "150";
每一次我们针对自己写的网站测试限速时,可以根据自己的需要更改以上效果的值,比如延迟的时间越长,限速就越明显。
我们还可以做的更好- 通过c#写fiddler的限速插件
虽然我们可以通过fiddlerscript来模拟限速,但还是会有以下不方便的地方:
1.每次想模拟不同网速时都要去更改fiddlerscript的那两句代码,有没有更好的方式来修改,比如在界面修改。
2.没有办法模拟网速不稳定的情况(网速时快时慢)。
我们可以通过fiddler更强大的扩展功能来解决上述两个问题,fiddler是可以加入一个Inspector插件对象,来使用.net下的任何语言来编写Fiddler,我这次选择用c#来扩展fiddler插件。
我们引入一个c#类库项目,引用fiddler的Inspector的插件对象,继承IAutoTamper类,重载onload方法与AutoTamperRequestBefore方法。
Onload:是fiddler在装载此插件时回调的方法,AutoTamperRequestBefore与fiddlerscript的onbeforerequest回调事件功能相同,都可以在request前请求自定义逻辑。
我们可以通过winform表单来为插件开发界面。
再通过用户配置的下载速度与上传速度来推算出下载每kb/s与上传每kb/s所delay的时间。
从而调用与fiddlerscirpt同样实现的接口
oSession["request-trickle-delay"] = [delay time];
oSession["response-trickle-delay"] = [delay time];
我们也可以在AutoTamperRequestBefore里给不同的随机数[1-500]来模拟每次请求可能会碰到网速不稳定的情况。
插件限速的效果
当我们设置下载速度与上传速度都为10kb/s,并且清楚掉缓存时,ie下访问www.baidu.com的效果。可以看到我们主页是边下载数据边渲染页面的,这说明我们www.baidu.com在网速较低时,也不会出现一个空白页面,让用户有不好的体验。
但如果访问页面较大的网站,比如:www.sina.com.cn时,同样的10kb/s网速,就会长时间的有一个空白页面,FE可以针对这种情况来分析js的阻塞与html的渲染。
总结:
Fiddler是web开发的利器,我们还除了利用它来限速之外,还可以通过文件匹配来实现本地开发来调试线上环境的等等更多的功能。通过限速我们可以看到在网络速度很低的时候页面的载入与渲染效果,对于FE工程师是非常有帮助,也有助于让项目的开发人员关注更多不同环境下的效果。
分享到:
相关推荐
fiddler模拟限速
在这个基于FiddlerCore的实例中,你可能看到了如何创建一个简单的应用,该应用启动FiddlerCore代理,捕获网络流量,并可能展示了如何自定义处理规则。通过深入研究源代码,你可以学习如何将这些功能应用到自己的项目...
fiddler模拟post请求。四种Post请求数据格式和fiddler模拟请求构造。 (一)application/x-www-form-urlencoded数据格式 (二)application/json数据格式 (三)text/xml数据格式 (四)multipart/form-data数据...
本文将详细讲解如何使用Fiddler来模拟POST提交,并探讨其中涉及的关键参数。 首先,POST是HTTP协议中的一个方法,用于向服务器发送数据,通常用于创建新的资源。在Web应用开发中,比如表单提交、API接口测试等场景...
3. **规则引擎**:通过自定义的AutoResponder规则,Fiddler2可以模拟服务器响应,对特定请求返回预设的静态或动态内容。 4. **脚本编写**:使用内置的JScript.NET语言,开发者可以编写自定义脚本来控制HTTP交互,...
主要介绍了Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
基于Fiddler Loadrunner的微信公众号自动化压力测试.pdf
全网最好的Fiddler培训PPT
除了基本的抓包和模拟请求,Fiddler2还有许多进阶功能,如规则自定义(使用FiddlerScript)、性能测试、断点调试、自动响应等。这些特性使Fiddler2成为一个全方位的网络调试利器。 **七、1Fiddler2文件** 压缩包中...
Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler包含... Fiddler无论对开发人员或者测试人员来说,都是非常有用的工具。
虽然提供的标签为空,但我们可以基于Fiddler的特性来讨论相关的知识点。 1. **Fiddler的主要功能**: - **网络流量捕获**:Fiddler可以记录所有HTTP(S)会话,帮助开发者和测试人员了解应用程序与服务器之间的交互...
3. **脚本支持**:Fiddler内置了基于JScript.NET的脚本环境,用户可以通过编写脚本来自动化各种任务,如自动化测试、数据处理等。 4. **会话管理**:Fiddler提供了一种方便的方式来组织、筛选和过滤捕获到的会话,...
4. **脚本扩展**:Fiddler内置了基于JScript.NET的脚本引擎,允许用户编写自定义脚本来自动化复杂的操作,如自动修改请求、筛选特定流量等。 5. **性能分析**:Fiddler可以帮助分析页面加载速度,通过查看每个资源...
在 IT 行业中,开发者、测试人员以及网络管理员经常使用 Fiddler 来诊断和调试网络问题,尤其是与 Web 应用程序交互时的问题。以下是对 Fiddler4 及其主要功能的详细介绍: 1. **安装过程**:`fiddlersetup.exe` 是...
1. **跨平台**:由于基于.NET Core,FiddlerCore能在Windows、Linux、macOS等多种操作系统上运行。 2. **API接口**:开发者可以通过API接口创建、读取、修改和控制网络会话,实现自定义的网络调试需求。 3. **...
7. **插件扩展**:Fiddler有一个活跃的社区,提供了众多插件来增强其功能,例如自动处理JSON数据、检查Web安全漏洞等。 对于QT下载慢的问题,Fiddler5 可以帮助我们: 1. **查看请求详情**:通过Fiddler,我们可以...
5. **自动化测试**:Fiddler支持编写自定义脚本,可以实现复杂的网络流量模拟和自动化测试,比如创建脚本来模拟用户登录流程。 6. **性能分析**:Fiddler可以提供详细的性能统计,如请求响应时间、带宽使用情况等,...
对于提供的"Fiddler中文免安装版",其特点是无需进行复杂的安装步骤,用户可以直接进行使用,这对于开发者来说非常方便。以下是使用该版本Fiddler的具体操作步骤: 1. **下载与解压** 首先,你需要下载Fiddler的...
对于测试来说,可以通过抓包方式修改前端请求参数和模拟后端返回,快速定位缺陷。也可以使用代理抓取app的请求信息,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作,也可以配置弱网信息,比对...
编程猫fiddler插件1.07是一款专为开发者设计的工具,它基于著名的网络调试代理Fiddler进行扩展,主要用于JavaScript的调试以及hook注入。Fiddler是Web调试神器,能够捕获HTTP/HTTPS协议的网络流量,帮助开发者分析和...