web debugger fiddler 使用小结

转:http://www.cnblogs.com/forcertain/archive/2012/11/29/2795139.html

内部分享时总结了一下fiddler的使用,总是想写一篇fiddler的文章,写之前搜了一下,发现园子里已经有介绍的大作了:Fiddler 教程 ,不过还是总结下,如有雷同,还请见谅啊,哈哈。fiddler是什么相信大家都很清楚了,用句通俗的话就是抓包工具,下面我们就从实际的功能来说下它是什么,能干什么?

工作原理

先上个图

此图一目了然,可以看出fiddler在请求中所处的位置,我们就可以确定它能干些什么。

它实际工作在本机的8888端口http代理,我们启动fiddler时,它会自动更改代理设置:

从此我们可以看出,只要是http的请求,在请求发起离开本机之前都会经过fiddler,当response回来,没有达到实际请求者时,也会经过fiddler:这样我们就可以在轻易的实现修改请求和响应的内容,这样我们就可以轻松的调试现网的程序。

与其它工具的区别

firebug、IE和chrome自带的开发者工具:这是前端开发的利器了,它们监听浏览器发起的请求和给浏览器的响应,显示请求数据和响应数据,这个fiddler基本功能一致,但它只是监听,只是对请求和响应数据的记录,而fiddler完全是接管了请求和响应。另外可以对呈现给浏览器html、css内容实现动态的修改,对页面制作人员简直有如再生父母的感觉;强大的js调试功能,前端开发人员的福音啊,这两点都是fiddler不具备的。

wireshark更变态了,貌似监视的是网卡,所有通过网卡的数据都会被记录。

下面说一下fiddler的强大功能。

fiddler强大功能之一 断点

在正式开始之前,我们就不介绍fiddler的基本界面了,可以看开头推荐的文章。

我们在命令输入区域输入help,回车会打开一页面,这个页面详细介绍了fiddler的所有命令,其中有关于断点的命令:bpu在请求开始里中断,bpafter在响应到达时中断,bps在特定http状态码时中断,bpv/bpm在特定请求method时中断

除此之外,在菜单栏:

也可以设置断点,不过这个会对所有的请求,不太实用。

下面我们就以bpu为例来说一下断点功能:

1,以百度为例子,打开百度首页

2,在fiddler命令输入区输入 bpu www.baidu.com,这样就可中断url中包含这个地址的请求

3,然后在刚打开的百度页面输入fiddler点击搜索

4,此时我们会在fidller会话面板看到

红色小图标开头的会话,双击。

5,查看右边面板

6,此在断点在请求未发出时,上半部分是请求的数据内容,切到webforms我们可以看到更直观的数据的请求数据:

在这里我们可以看到wd和oq参数都是我们输入的关键字fiddler,可以修改,是的可以修改的,全部改成fiddler2。这里只是就实现修改了请求数据,其它的post数据,甚至是headers里的cookie、referer、user-agent等都可以修改。

7,看面板中间的

两个按钮和一个下拉选择框:break on response,点击这个按钮,就会在发出请求,在响应数据回到fiddler时再次中断;run to complete,点击就会正常处理,不会再中断请求。

打开下拉选择框:

这里有很多的操作选择,就是选择输出内容,选择之后,实际的响应数据就会这些操作替代,特别是最后一个find a file:这个我们可以中断一个图片,然后这里选择本地的一张图片,这样我们就可以替换页面的图片。比较强大的场景就是例如现网js出了问题,但是一般现网的js是压缩过的,在firebug中根本无法调试,这样我们可以把它映射到本地的一个原始版本,这样firebug就会拿到一份原始的js,就可以方便的调试了。这个功能大家自己动手去实验吧。

8,点击break on response,这时在右边面板下部分就有内容了,就是响应内容,fiddler再次中断,响应内容已经回到本机,但是还在fiddler代理这里,还没有到浏览器。

切到webview:

我们可以看到我们关键词已经变成了fiddler2,返回是fiddler2的搜索结果。

切到textview面板,我们可以看到返回的html内容,对,在这里,我们可以再次修改响应的内容,例如我们找到title标签加一些内容。

当然不只这些,我们知道firebug这些工具是不能修改js的,我们用fiddler就可以中断我们要修改的js文件,然后在这里修改部分代码,之后再借助firebug就可以完美调试现网代码。

9,看右边面板中间的操作区域,

此时我们仍然可以通过下拉选择特定的响应内容替代服务器的响应。

10,点击run to complete.

此时查看浏览器标签区:

是我们修改过的内容了。

另外:命令行输入 go 会断续执行所有中断,再次输入 bpu 会清除所有的断点。

fiddler强大功能之二 AutoResponder

这个面板,这个功能和上边我们介绍的choose response的功能大概相同,就是针对一些匹配的请求,让请求者得到的我们指定的数据,而不是服务端返回的真实数据。

不过这个面板确定启用了建立好的规则之后,每次匹配都会使用指定的响应内容,比上边要每次中断时指定方便。

我们可以直接从左侧会话面板直接拖拉会话到这个面板,例如我们直接从左侧面板拖baidu的记录到这个面板,看下面的编辑区域

然后在第二行里,选择404_plain.dat,点击save保存。

面板中会有

这样的一条记录。

再去刷新baidu,会得到

就这样,我们就可以会为某一个请求如js的请求,返回本地的一个js数据,在配合firebug完美调试页面前端。

不想使用时,直接去此面板上面的勾,或者去掉某条规则上的勾。

fiddler强大功能之三 请求构造器

顾名思意,就是构造请求,然后点击execute按钮可以发起请求。

我们可以自己手动规定请求的各个内容,同样的我们可以从会话面板拖一个会话到此面板,此时面板会显示这个会话发起请求的所有数据,这样我们可以在此基础上修改这些数据,然后点击execute按钮来发起一次请求。

fiddler强大功能之四 自定义脚本

通过修改脚本文件,我们可以在fiddler本身的逻辑之上,加入自己的特殊处理。

我们可以

调出脚本进行修改,也可以在

这个面板上直接修改。

令广大.net同学高兴的是,fiddler本身是C#写的,再加上较为详细的注释,这个脚本文件对于我们来说还是比较容易上手的,具体自己去体会吧。

fiddler强大功能之五 性能测试

我们从会话列表中选择一个或多个会话,然后查看右边statistics面板:

在这个面板中,我们可以看到这些请求各个阶段的时间,发送和接受数据量,还会有一个在世界不同地方访问这些请求一个评估。

最下面还有一个 show chat的链接点击我们可以看到一个直观的各种类型数据在总的数据的图形。

除了这些统计之外,我们还可以在会话列表查看,查看我们请求内容的是否做了浏览器缓存和缓存时间。

还可以在菜单中

勾选这两项显示会话响应结束时间,同时在菜单的第二项和最后一项我们可以禁用或总启用浏览器的缓存。

看清楚这个菜单的第一项 对 模拟网速,当我们勾选这个项之后,然后在自定义脚本里找到:


1

2

3

4

5

6

if (m_SimulateModem) {

    // Delay sends by 300ms per KB uploaded.

    oSession["request-trickle-delay"] = "300";

    // Delay receives by 150ms per KB downloaded.

    oSession["response-trickle-delay"] = "150";

}

它们分别是:每上传1KB数据时暂停300ms和每下载1KB数据时暂停150ms,我们可以通过修改这些值来达到模拟网速的效果。

另外,我们选择一个会话,然后在右侧

来查看这些请求是否启用了gzip压缩,然后选择各个压缩的字节大小,来直观的看到我们启用压缩之后能节省多少的数据流量。

fiddler强大功能之六 强大的命令

这里就不介绍了,在命令输入区域,输入help,回车之后,打开的页面上介绍挺全的,真的很强大。

fiddler强大功能之七 过滤器

你有时会不会打开fiddler来抓取这个页面的,但是其它的各种请求的数据也会被记录,然后再费劲查找,这时就启用过滤器吧。

启用之后,就可以根据自己的意志去加条件,不过这里不对这些做介绍,而是给大家说一个更简单的工具:

工具栏上

这个工具,我们鼠标摁住这个按钮,然后拖动到我们要抓取的浏览器标签页之上,然后松开,就会看到

这样的效果,这样fiddler就会只抓取该进程的请求。这个按钮还可以拖动到其它的任何程序上甚至是桌面上:

不过explorer貌似不会发起http请求,呵呵。

除了这些主要功能之外,fiddler的工具栏上提供了一些非常实用的其它功能,例如删除按钮,可以选择删除特定内容;keep:All sessions按钮,可以选择会话面板只保存多少个会话,查找,清理缓存等操作,最后说两个比较有挺有意思的:

1,工具栏的

点中之后,它会为那些编码的数据自动的解码,利于阅读。

2,工具栏差不多最右边有个工具

点击,弹出一个小工具:让我们可以进行各种形式的编码和解码。

3,最下方状态栏

左边一个点击下,可以让fiddler不再抓包,通过IE代理处可以查看,其实是清除了代理设置,再点击就可以再次开始抓包;右边这个按钮我们可以决定让fiddler抓取浏览器发起或其它程序发起的http请求。

细心查看,你也可能会发现fiddler其它强大的功能。不用多说,fiddler绝对是前端开发的利器,开发者工具firebug之类的配合可以解决很多前端开发中的很多问题。

时间: 2024-09-30 14:49:28

web debugger fiddler 使用小结的相关文章

Web页面布局方式小结

事实上,本文是在Peter Jerde的How much information can be stored by ordering 52 playing cards文章基础上翻译.改编和扩展而来的.当然这是经过Jerde本人首肯的. 注意本文方法并非最优,也没有完全利用所有的信息空间,只是简单的尝试. 有数字的地方就有信息.所以扑克牌中保存信息不是什么新鲜事. PDF文档点这里:下载 原文(英文)点这里:访问 这里有两个DEMO. 编码DEMO,解码DEMO 首先是"DEEP IN SHALL

Fiddler Web Debugger是什么?(图文详解)

不多说,直接上干货! 1.为什么是Fiddler? 抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark. 见 为什么使用fiddler? 原因如下: a.  Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大.模拟http请求的功能也不够,且firebug常常是需要“无刷新修改”,如果刷新了页面,所有的修改都不会保存. b. Wireshark是通用的抓包工具,但是比较庞大,对于只需要抓取http请求的应用来说,似乎有些大材

Fiddler Web Debugger简单调试头部参数

POST接口时头部参数如下: User-Agent: Fiddler Host: api.***.com Content-Length: 73 Content-Type: application/json Request Body应该如下传递参数: {"category":"9","sort_key":"0","sort_value":"0","page":"

Telerik Fiddler Web Debugger 过滤选择监测网站

在之前,Telerik Fiddler 我都没有听过,直到后面进行改成接口编程之后,开始接触.第一次用的时候,上网查了资料,大概了解了这个接口抓包工具. 准备使用: 在进行接口测试的时候,我们需要进行接口数据传输的监视和查看,可以使用Telerik Fiddler这个抓包工具,那么问题来了,它一般默认是只要本机有进行数据交互,就会全部抓取,但是因为我们不需要的数据太多,所以要找到我们想要的数据有点麻烦:那么Telerik Fiddler就给我们一个过滤器,让我们可以过滤掉我们不需要的网站数据交互

移动端真机调试抓包,fiddler web debugger

小白一枚,在公司大神指导下加之找了好多资料才勉强将fiddler的使用摸透,果然很好用. 一.设置手机 二.设置fiddler 原文地址:https://www.cnblogs.com/zhenchaojia/p/8303681.html

WEB前端开发学习小结

[引言] 在经过了将近六个月的学习时间终于对B/S的学习有了一定认识,在这段时间里可以说自己的收获非常的多,从一 个对web开发没有任何基础的小小小菜鸟变为了一个菜鸟,虽然自己现在还是一个菜鸟,但是自己和半年前的自己对 比进步还是巨大的,因为现在的自己至少到了知道"是什么?"的阶段,对已项目中用到的知识还是比较熟悉的(宏 观),在这个过程中也会因为一个错误困扰自己很长时间,因为那是自己对于挑错还是非常不熟悉的,像哪些辅助工 具firebug等都不知道是什么,而现在运用的还算是比较灵活,

Web调试工具——Fiddler介绍

Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助. 阅读目录 Fiddler的基本介绍 Fiddler的工作原理 同类的其它工具 Fiddler如何捕获Firefox的会话 Firefox 中使用Fiddler插件 Fiddler如何捕获HTTPS会话 Fiddler的基本界面 Fiddler的统计视图 QuickEx

Web开发之404小结

404算是Web工程里最常见的错误代号了.今天做一个小结: 场景:[Tomcat运行正常,但无法访问自己建的项目:404] 结果:在URL拼写正确的情况下,无法访问目标工程任何页面 信息:[404]:not found 分析: 经过多次排查后,发现MyEclipse并没有部署到tomcat的webapp文件夹下,而是部署到了tomcat根目录外的webapp文件夹下 小结: [404错误]:web服务器运行正常,且URL所指向的目标文件未被web服务器查询到 1.(服务器端)工程部署位置:工程未

异构系统间Web Service通讯框架小结(补完企划)

本文不讨论WS性能问题,也不讨论使用非框架方式比如TCP伪造HTTP协议等方式通讯,仅讨论在常见的系统间使用HTTP+SOAP通讯框架的方法以及雷区. 本文大多数内容来自于某次在两个月内迁移完两个异构ESB产品后的思考. Java Java下框架比较多,常见问题是一种获取(HTTP GET) WSDL文件然后框架动态编译,再POST服务.在不计较性能的情况下没有什么问题.如果获取到的WSDL中服务URL不可访问,则框架就会产生错误.如果不能修改源码改为直接POST方式,一种解决方案是将手工下载的