Fiddler调式使用知多少(一)深入研究 - WEB前端 - 伯乐在线
& Fiddler调式使用知多少(一)深入研究
Fiddler的基本概念：
Fiddler是一款基于windows系统的代理服务器软件，本地运行的程序，比如web浏览器及其他客户端的应用程序，可以把http和https请求发送给Fiddler，Fiddler通常把这些请求转发给web服务器，服务器将这些请求的响应返回给Fiddler，Fiddler再把响应转发给客户端。
Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1, 端口:8888. 当Fiddler会自动设置代理， 退出的时候它会自动注销代理，这样就不会影响别的程序。如果Fiddler非正常退出，这时候因为Fiddler没有自动注销，会造成网页无法访问。解决的办法是重新启动下Fiddler即可。
安装Fiddler
安装Fiddler之前需要安装.net framework， 我目前的安装的是Fiddler4，所以我下载安装的是.net framework4，如下所示：
安装Fiddler和安装一般的软件没有什么区别，这里就不介绍~~；
了解下Fiddler用户界面
我这边是Fiddler4的界面如下：
在fiddler中web session界面中捕获到http请求如下所示：
Web session列表兰中包含了一些信息如下：
理解不同图标和颜色的含义（下面是常见的）：
web session的常用的快捷键
CTRL+A： 选中所有的session；
取消选中所有的session；
反向选中；如果session已选中，则取消，否则选中；
删除所有的session；
Delete： 删除选中的session；
Shift+Delete 删除所有未选中的session
重新执行当前请求
多次重复执行当前请求
U： 无条件重新执行当前请求，发送不包含If-Modified-Since 和 If-None-Match的请求头
SHIFT+U 无条件地多次重复执行当前请求。
ALT+Enter 查看当前session的属性；
Insert：切换是否用红色粗体标记选中的session
给选中的session添加描述；
了解web Session上下文菜单
我们来点击session一项后，右键菜单，会出现如下所示：
AutoScroll Session List选项用于决定Fiddler是否会自动把新增的session添加到web session列表中。
我们先来了解下 Copy菜单项的一些session信息如下：
Just Url： 把选中的session的url列表拷贝到剪贴板，每行一个url。如下我们定位到session中，
当我们进行粘贴的时候，看到是一个url地址；如下所示：
上面可以看到，我们还可以使用快捷键ctrl+u 实现；
This column: 拷贝选中session菜单所在列的文本；如下：
到我们拷贝完成的时候，进行粘贴的时候，可以看到如下文本：
Terse summary：把选中的session的简要说明复制到剪贴板中，简要说明中包括请求方法，url，响应的状态码及状态信息，如果响应是HTTP/3xx重定向，文本中也会包括响应头中Location字段的内容；如下所示：
当我们进行粘贴的时候，可以看到如下信息：
GET /UpdateCheck.aspx?isBeta=False
200 OK (text/plain)
当然如上也可以使用快捷键；
Headers only
把session的请求头复制到剪贴板中，既可以以纯文本格式，也可以以HTML格式复制。如下：
粘贴如下：
GET /UpdateCheck.aspx?isBeta=False HTTP/1.1
User-Agent: Fiddler/4.5.1.2 (.NET 4.0.; WinNT 6.1.7601 SP1; zh-CN; 2xx86)
Pragma: no-cache
Accept-Language: zh-CN
Referer: /client/4.5.1.2
Accept-Encoding: gzip, deflate
Connection: Close
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/ charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
Set-Cookie: sid=jELer5vxx0gyb7Fw53nCXaobR7BcBb+Ortlpxuq2IuvsiQP1UoSgUO2DLC4HoxbgEq5YLfg959JRyKoL5ZX33nBVHffCk3UQDBWH5XAPRIGiSo9kJOvdHF6iP/UdEvLLyWb43itzcIaZNksXDEnidrB3lVo=; expires=Wed, 02-Jul-:29 GMT; path=/
Access-Control-Allow-Origin:
Date: Sun, 05 Jul :29 GMT
Content-Length: 447
Connection: close
Session: 把整个session列表复制到剪贴板中，支持以纯文本和HTML这两种格式进行复制。如下：
粘贴结果如下：
GET /UpdateCheck.aspx?isBeta=False HTTP/1.1
User-Agent: Fiddler/4.5.1.2 (.NET 4.0.; WinNT 6.1.7601 SP1; zh-CN; 2xx86)
Pragma: no-cache
Accept-Language: zh-CN
Referer: /client/4.5.1.2
Accept-Encoding: gzip, deflate
Connection: Close
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/ charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
Set-Cookie: sid=jELer5vxx0gyb7Fw53nCXaobR7BcBb+Ortlpxuq2IuvsiQP1UoSgUO2DLC4HoxbgEq5YLfg959JRyKoL5ZX33nBVHffCk3UQDBWH5XAPRIGiSo9kJOvdHF6iP/UdEvLLyWb43itzcIaZNksXDEnidrB3lVo=; expires=Wed, 02-Jul-:29 GMT; path=/
Access-Control-Allow-Origin:
Date: Sun, 05 Jul :29 GMT
Content-Length: 447
Connection: close
?I?%&/m?{J?J??t???@??????iG#)?*??eVe]f@????{???{???;?N’????\fdl??J??!???-?~|-?”????o??????o???w?{??&??wwog????=[???2O_f?y??d?v]?i?XUu??g?f?O?n????Z7?d}q^???#
~’????=?_?????I??o???k???z?.?u??
7}???6[?7? }?-[|:o???w’eu????xZ-???uwU5msw????????W??n????v???F???????q?{~????_????q?f????i??????-?eZ??-}:????GOsB?X^?WE;O? ???I??U?]fE?M?|?’??^????M?u?PV?*?’D?4?.???b????4g?YkF?(?S????w???
Response DataURI :响应信息的DataURI
截图如下：
信息如下：
data:text/base64,H4sIAAAAAAAEAO29B2AcSZYlJi9tynt/SvVK1+B0oQiAYBMk2JBAEOzBiM3mkuwdaUcjKasqgcplVmVdZhZAzO2dvPfee++ujudTif33/8/XGZkAWz2zkrayZ4hgKrIHz9+fB8/IvZ/4+T+b5zs/sbJ3m+c7I/vj3fHe+n3Pr27d3dvZ/f+93/jJD1brOrqMk9fZtO3eZueZKt2XedpsVhVdeu+n6Vny2aVT9uqbujTn8zqolo36WR9cV68y+kjA34n/d7+3T36Xwh/lr6pqrJJj9Jvf/n6zWv64vV6hS7Sl3X10wQ3fb3K6jZb0jf0Cn2RLVsPfDpv29Wju3cnZXXRjNu8zOvi7XhaLe6eF7MZ/XV3VTVtc3f3/vbO/vbeg7tX86zdbraX+dV2sdzWRtv72/e3iRi/cfJ7fvf0+cmXX5z+nr9x8maep6/zabWcpaezoi2qZVqdpy19Oqmqt+lHT3NC46JYXqRXRTtPnwmoj9KiSZfVVZpdZkWZTcp8/Bsnz/OsXqaLigiYTap1y1BW2SqvJ0TeNKMunr76Yvu8zvM0Z+hZa0amKOJTjOv/AeF3j4a5AQAA
Full Summary
把web session列表中显示的信息复制到剪贴板。如下：
信息如下：
Protocol Host
Content-Type
/UpdateCheck.aspx?isBeta=False
447 private
text/ charset=utf-8
fiddler:6500
Save子菜单中包含了用于把流量保存到文件中的一些选项；如下所示：
Selected Sessions中的In ArchiveZip 选项是把 Web Session列表中选中的session保存到SAZ文件中；如下所示：
Selected Sessions中的 As Text是把选中的所有session一起保存到一个文本文件中；如下：
Selected Sessions中的As Text(Headers only) 把选中session的请求头和响应头一起保存到一个文本文件中；下面还有很多选项，我这边就不一一介绍，等用到某一项的时候，我们再来介绍；
Fiddler如何捕获firefox中的会话
Fiddler启动时默认是IE代理设置127.0.0.1:8888,其他浏览器需要手动设置；
Firefox手动设置如下：工具 –》选项 –》高级 –》网络 –》设置
即可生效；不过上面的设置比较麻烦，我们可以安装一个插件，如下：
Firefox中安装FiddlerHook插件
当我们安装好fiddler后，就已经安装好了FiddlerHook插件了，我们需要去firefox中启用这个插件；工具—》附加组件—》扩展—》fiddlerHook启用
启用即可！！然后我们需要在firefox中进行设置即可；
我们再来看一下Firefox手动设置如下：工具 –》选项 –》高级 –》网络 –》设置
我们可以再来安装一个hostAdmin插件即可方便查看。
Fiddler如何捕获Https会话
默认下，Fiddler不会捕获HTTPS会话，需要你设置下, 打开Fiddler
Tool-&Fiddler Options-&HTTPS tab
弹出框后一直点击Yes即可；
Fiddler的HTTP统计视图（可以优化请求和页面）
Fiddler的统计选项卡中显示了当前Session的基本信息，在选项卡的最上方显示的是文本信息，最下方是个饼图，按MIME类型显示流量。使用Statistics页签，用户可以通过选择多个会话来得来这几个会话的总的信息统计，比如多个请求和传输的字节数。
选择第一个请求和最后一个请求，可获得整个页面加载所消耗的总体时间。从条形图表中还可以分别出哪些请求耗时最多，从而对页面的访问进行访问速度优化。
如下所示：
饼图如下：
统计选项卡的一些信息含义如下解释：
Request Count： 选中的session数；
Unique Hosts： 流量流向的独立目标主机数。如果所有选中的流量都发送到相同的服务器上，则不会显示该字段。
Bytes sent:
HTTP请求头和请求体中向外发送的字节总数。后面括号中分别给出了头和body各自的字节数。
Bytes received: HTTP请求头和请求体中接收到的所有字节数。在全部计数后面的括号中给出了请求头和请求体各自的字节数。
Requests started at: Fiddler接收到的第一个请求的第一个字节的时间点。
Responses completed at: Fiddler发送到客户端的最后一个响应的最后一个字节的时间点。
Sequence(clock) duration:
第一个请求开始到最后一个响应结束之间的 “时钟时间”。
Aggregate session duration: 所有选中的session从请求到响应之间的时间的和。
DNS Lookup time: 所有选中的session解析DNS所花费的时间的总和。
TCP/IP Connect duration: 所有选中session建立TCP/IP连接所花费的时间总和。
HTTPS Handshake duration： 所有选中session在HTTPS握手上所花费的时间总和。
Response Codes： 选中session中各个HTTP响应码的计数。
Response Bytes by content-type: 选中session中响应的各个Content-Type的字节数。
Estimated Performance: 选中的流量在不同语种(local)地区和连接方式下所需时间的初步估计。
移动开发如何使用fiddler调式代码
首先电脑和手机要使用同一个无线网。
配置Fiddler，点击 Tools
手机端的配置，我这边是Android手机(IOS也一样)，点击设置进去，选择无线网，如下：
点击代理设置进去后，如下：
接下来可以看看我的ip地址如下：
如上设置后，我们就可以使用手机访问网页后，可以使用fiddler来监控请求或者替换js或者css文件了；
注意：有时候我访问的页面提示
“代理服务器连接失败”，那么这种情况下，很有可能是防火墙或者一些360类似的杀毒软件，我们可以在防火墙下设置为fiddler通过，如下所示：
如上设置我们可以监听页面请求了，但是如果我想要监听本地的服务器端的代码，就访问不了（我本地使用的服务器是php环境），比如上我在本地做demo，如果一切好的话，我上传到服务器端去，首先我们需要启动php服务器；启动好后，我们来使用本机的ip来访问下；如下所示：
我们需要在fiddler里面修改配置，Tools –》 HOSTS，如下：
点击保存按钮后，我们接着再访问页面，就可以访问了，如下：
页面可以访问后，有时候我们想替换下js或者css文件，我们就可以使用右侧的tab选项栏中的AutoResponder了，如下：
在最下面的可以替换一些js或者css文件即可了；这里就不多介绍了~
如上是目前总结的一些基本fiddler基本知识点， 在接下来的业余时间会多去总结Fiddler相关调式方面的知识点~
如果总结的不好的话，希望大家多多指教~~
总结：Fiddler基本知识点总结如上一些，在接下来的时间会全面总结Fiddler相关的含义，我们平时用到的Fiddler一些方面，但是我们还需要多去理解其他各个方面的含义，为以后使用代理http请求或者优化页面有更好的理解，因此我觉得有必要的多去学习下Fiddler知识点~ 所以Fiddler一直会有下文总结的~~
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线隆重献礼：http协议调试神器 – Fiddler02/06/2010
r真乃神器！它和市面上常见的很多web调试器、http调试器、sniffer都不同！它的原理是在浏览器（或者其他使用http协议的进程）和服务器之间做代理角色，这样所有的通信都要经过它！尽管sniffer和这个原理是一样的，但他们工作的网络层不同。
看上图，你就明白原理了咯，它以8888端口（多么吉利的数字呀！）开本地代理服务器，并且支持https！所以，只要你的http通讯将代理设置为本地8888，fiddler都能帮助你截获数据；另外，说他是神器，除了他具有一般web调试器的所有功能之外，其最最大的一个特点是可以中途修改http通信内容！！！看下图：
嗯，就是这样，提交内容和服务端响应内容都可以被fiddler中断，修改内容后再次继续，在ajax通信的时候，我们可以利用这个功能来调试数据，测试bug！方便至极。
还有一个我不得不说的功能就是Fiddler内置的request Builder能让你轻松的构造http请求，之前我一直用的是火车采集器里面的那个简易的POST/GET Builder，个人感觉Fiddler的这个更好用一些。另外的一个附件就是encoder,方便的解码base64、urlencode、hex等进行的相互转换，之前我是用JS写了一个工具实现这个功能，吼吼！~我发现Fiddler的时候不知道有多兴奋，以前用wireshark+火车采集器+JS encoder，现在只需要开一个Fiddler就可以啦！
今天，我就隆重的把它介绍给大家，也许大家早已在使用了，因为这个工具已经存在很久了，微软的东西，需要.net freamework 支持，这是唯一不爽的地方！但我承认，微软的.net类库真的太丰富了！快来使用哈！更多功能期待您的发掘。> 博客详情
摘要: 利用360wifi + Fiddler 调试手机应用
###Fiddler 原理
之前也有使用Fiddler做一些web调试（flash上传的时候，FF看不到网络请求的时候，Fiddler就很好用了），但是有时候使用chrome调试的时候，Fiddler就抓不到包，开始以为Fiddler的问题，后来看了一些资料才知道Fiddler是利用代理服务器的方式抓包的，默认代理地址是127.0.0.1:8888，端口在设置里面可以修改。所以只要设置chrome的代理为127.0.0.1:8888就可以顺利抓到包了。![Tools-&Fiddler Options][1]
###手机代理设置
- 连路由器的情况
如果本地ip是192.168.206.53，那么手机的代理只要这样设置成192.168.206.53:8888就可以了。(设置代理的方法，长按热点，修改网络就可以了)
![设置代理][2]
![手机代理设置][3]
- 使用360wifi的情况
360wifi会把你的无线网卡ip默认设置成这个172.27.35.1，所以代理改成和他一样的就可以了172.27.35.1:8888（其他360wifi不知道是不是这个ip，要看下具体的）
![查看ip][4]
![设置代理][5]
###Fiddle设置
要将Fiddle设置成可远程连接
![在此输入图片描述][6]
###实现效果
下面这张截图是今日头条手机客户端查看一条信息时请求的url
![在此输入图片描述][7]
[1]: http://static.oschina.net/uploads/space/2613_oMZy_657911.jpg
[2]: http://static.oschina.net/uploads/space/4846_eoi1_657911.jpg
[3]: http://static.oschina.net/uploads/space/4557_aGbT_657911.jpg
[4]: http://static.oschina.net/uploads/space/U_657911.jpg
[5]: http://static.oschina.net/uploads/space/5431_LF1P_657911.jpg
[6]: http://static.oschina.net/uploads/space/0752_gohW_657911.jpg
[7]: http://static.oschina.net/uploads/space/0512_sqgQ_657911.jpg
人打赏支持
码字总数 1383
[13]不好意思，这两天都没有上OC,请问你是什么具体的情况？是手机代理设置的问题还是其他的？
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥}