Hello World
Spiga

使用Fiddler辅助观看InfoQ的视频

2009-12-29 12:04 by 老赵, 6654 visits

InfoQ是一个好地方,而我认为其中最有价值的资源,便是其中的演讲视频。InfoQ在这方面有个特点:在演讲视频下方提供了清晰的幻灯片,而在播放的同时,还会根据进度进行切换。这观看体验自然比单纯的演讲录像要高出许多。可惜的是,时不时有朋友会向我反馈说,InfoQ实在是太慢,几乎无法流畅地观看视频。由于一时半会儿InfoQ也不会在中国放CDN,因此视频加载速度这问题……几乎无法解决。还好,如果我们退而求其次,至少可以使用Fiddler等工具来“缓解”这个问题。

Fiddler简介

Fiddler是Eric Lawrence完全使用.NET开发的一个免费HTTP调试工具,后来微软连人和工具一起收购之后,也把它在当作一个产品在做。Fiddler在工作时本身并不进行网络嗅探的工作,它只是充当一个“代理服务器”的功能,而任何软件只要使用这个代理,Fiddler便可以截获它发出的所有请求,进行跟踪,查看,甚至我们一会儿会看到的更多高级工作。关于Fiddler的更多信息,您可以关注PDC 09中Eric Lawrence做的演讲,内容还是挺充实的。

因为有了Fiddler,我几乎已经完全不用Firebug的Net功能了,因为它的功能有限,且只能基于Firefox运行。由于Fiddler的工作原理,它可以在任何一个使用代理服务器的工具中使用。当然,Fiddler的这个工作原理,也导致它无法获得某些信息。例如Firebug可以获得某个请求在浏览器中的等待时间,或是DNS的解析时间——而Fiddler只能跟踪请求发起后的情况。

Fiddler还支持扩展,编写Fiddler扩展很容易。Fiddler还提供了如FiddlerCore这样的核心类库,可以让我们的程序提供如Fiddler那样的嗅探功能。不过这些话题超出了这次的内容,我们这次只使用Fiddler自带的功能。

下载视频

那么,我们又该如何使用Fiddler来辅助观看InfoQ的视频呢?因为视频在线观看速度很慢,我们很自然想到,把它下载到本地再观看就没有这个问题了。一般此类在线视频都是请求一个flv文件,而这个文件的路径可以轻松地使用Fiddler获取到。

例如,您可以打开Fiddler,在浏览器中进行代理服务器设置(可能自动已经设好了),然后打开InfoQ中Statically Dynamic Typing这个视频,代页面加载完毕后点击视频的播放按钮。于是,Fiddler便可以截获如下请求:

请看上图中截获的最后那个请求,是一个flv文件。您可以对其点击鼠标右键,再选择Copy - Just Url,便可以复制这个文件的完整地址。然后,您便可以使用下载工具或任何方式把这个文件下载到本地,存放在硬盘上。至此第一步就完成了。

设置过滤条件

对于某些站点的视频播放来说,您已经可以直接查看下载后的文件了。不过对于InfoQ的视频来说,您如果直接在本地播放,便无法享受“幻灯片”的同步功能。很自然的,我们希望视频播放页面可以使用我们本地的文件。不过这是下一步要做的事情。而现在我们先来做另一件事情,那便是设置Fiddler的过滤条件。

由于Fiddler的原理是截获通过自身(即代理)的所有请求,因此有时候也会得到很多不必要的信息。例如,我们在Internet Options中设置了代理服务器后,所有IE或Chrome的页面,甚至MSN亦或是您自己写程序时使用WebClient或WebRequest发出的请求,都会通过这个代理。此时您会发现Fiddler中的请求密密麻麻,且会不断增长,非常影响调试工作。

此时,您可以设置一个过滤条件,告诉Fiddler,只有满足特定条件的请求才捕获进来。设置过滤条件并不难,Fiddler提供了一个Process Filter小图标(如上图),您可以把它拖拽至某个程序窗口上,这样只有那个进程发出的请求才会被捕获。不过这么做有时很不方便,因为如现在的浏览器,如IE 8或Chrome都是多Tab的,每个Tab都属于不同的进程,拖放时很可能会不知所云。因此,我们在这里手动设置过滤条件:

首先,还是上图的结果,不过我们把横向滚动条拖至右侧,可以发现在Process栏目中写着“chorme:6764”字样,这表示该进程的名称及pid。于是,我们可以在Fiddler的Filter栏目中把它设为唯一的过滤条件:

再试试,看看Fiddler是不是只截获那个Tab所发出的请求?

设置断点

万事俱备,只欠东风。我们要做的最后一步,便是让Fiddler把原本对远端flv文件的请求转为本地的请求。这便可以利用Fiddler的断点功能。

由于Fiddler会在所有捕获的请求上进行中断,因此我们必须减少捕获的请求。例如,把过滤条件设为视频播放页面便是一个不错的选择。假如您已经设好了过滤条件,那么可以打开播放页面(但不要进行播放),再清除Fiddler中已经捕获到的信息。然后,设置断点:

选择Before Requests,这样Fiddler会在得到请求信息之后暂停,等待我们后续处理(图片可点击放大):

然后,我们只要选择Choose Response - Find a file:

然后选择我们我们下载到本地的文件,在点滴“Run to Completion”就可以了。不过,开始播放之后记得禁用Fiddler的断点,否则页面在切换幻灯片的时候也会被Fiddler暂停——这就不太好了。

总结

看看,现在播放起来是不是很流畅?Fiddler其实还有许多有用的功能,几乎可以说是“Web相关”开发人员的必备工具了。Fiddler的发展也很迅猛,本身也有非常强大的可扩展性。如果您的项目需要有类似Fiddler的嗅探功能,不妨可以朝这方面进行一番探索。

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

26 条回复

  1. 真见
    *.*.*.*
    链接

    真见 2009-12-29 12:27:00

    貌似赵哥沙发

  2. 毕海
    *.*.*.*
    链接

    毕海 2009-12-29 12:36:00

    貌似HttpWatcher用起来方便些!

  3. Ivony...
    *.*.*.*
    链接

    Ivony... 2009-12-29 12:37:00

    Fiddler这几年发展的确很猛,功能已经趋于完善了,用来分析HTTP简直是不二之选。

    另,不知道老赵有没有注意到Fiddler状态栏左边的那几个东东,其实很多操作根本就不必那么麻烦,直接点击状态栏就可以了。

    从左至右依次是,捕获请求开关,一个粗犷的筛选器(可以在浏览器、非浏览器、所有进程几种状态之间切换),自动断点设置(可以在三种状态之间切换)。

    用好这三个功能,就可以很好的去除很多垃圾信息了。

  4. 老赵
    admin
    链接

    老赵 2009-12-29 12:42:00

    毕海:貌似HttpWatch用起来方便些!


    可惜是收费的——而且和浏览器集成,呵呵。

  5. 老赵
    admin
    链接

    老赵 2009-12-29 12:43:00

    @Ivony...
    我好像都是用菜单了……

  6. tianxd
    *.*.*.*
    链接

    tianxd 2009-12-29 14:28:00

    顶了

  7. Yinner
    *.*.*.*
    链接

    Yinner 2009-12-29 16:19:00

    我以前都用“网络嗅探器”+迅雷的解决方案,

    使用嗅探器找到.flv的地址,下载之,
    然后找到幻灯片地址,一般为.swf后缀,因为多幅幻灯片对应多个.swf文件,就用通配符批量下载,但是没有解决下载后视频播放和幻灯片对应的问题
    

    今天又学习了一招。

  8. 极品拖拉机
    *.*.*.*
    链接

    极品拖拉机 2009-12-29 17:23:00

    firebug能行不?

    感觉infoq上面的文章的哦很短啊。

  9. subwayline13
    *.*.*.*
    链接

    subwayline13 2009-12-29 17:28:00

    我教过公司的MM使用wireshark下载youku那些FLV的视频,虽然不是很直观,但是她们把硬是把几个步骤记住了,哈哈。

  10. 老赵
    admin
    链接

    老赵 2009-12-29 17:35:00

    极品拖拉机:
    firebug能行不?

    感觉infoq上面的文章的哦很短啊。


    那些是新闻,infoq上最有价值的感觉还是视频。

  11. 老赵
    admin
    链接

    老赵 2009-12-29 17:36:00

    subwayline13:我教过公司的MM使用wireshark下载youku那些FLV的视频,虽然不是很直观,但是她们把硬是把几个步骤记住了,哈哈。


    所以不是学不会只是没有动力去学。

  12. 快乐学习
    *.*.*.*
    链接

    快乐学习 2009-12-29 20:04:00

    不错,没想到还可以用在这里:)

  13. 张荣华
    *.*.*.*
    链接

    张荣华 2009-12-30 10:21:00

    老赵,在进行到“我们只要选择Choose Response - Find a file:”时,选择了Find a file但是却没有弹出一个选择文件的对话框,无法选择文件应该怎么办?
    我的环境是server 2008 + ie7 + fiddler v2.2.7.5版,选择find a file时页面会显示“Fiddler - The file D:\Backup\我的文档\Fiddler2\Captures\Responses\Choose Response... was not found. ”

  14. 老赵
    admin
    链接

    老赵 2009-12-30 10:25:00

    @张荣华
    给个截图?

  15. 张荣华
    *.*.*.*
    链接

    张荣华 2009-12-30 10:44:00


    选择“find a file"后,页面一闪,然后就这样了。

  16. 老赵
    admin
    链接

    老赵 2009-12-30 11:26:00

    @张荣华
    看上去没异状啊……不清楚了……

  17. canbeing
    *.*.*.*
    链接

    canbeing 2009-12-30 12:15:00

    好办法,另外发现一个错字:"chorme:6764"应为“chrome:6764”

  18. SPARON
    *.*.*.*
    链接

    SPARON 2009-12-30 22:36:00

    请问博主,用的什么截图工具啊?

  19. 老赵
    admin
    链接

    老赵 2009-12-30 22:40:00

    @SPARON
    用PicPick截图,Paint.NET处理。

  20. 超SEO
    *.*.*.*
    链接

    超SEO 2009-12-31 11:00:00

    Fiddler是个好东西,能监控一些httpwatch和firebug监控不到的请求,不过请教一下,下面的乱码该怎么识别?x-amf的post数据!
    Content-type: application/x-amf
    Content-length: 61

    ����DataAccessor.getIndexes�/1���
    �keyword�0��

  21. 悟空空
    *.*.*.*
    链接

    悟空空 2009-12-31 15:21:00

    哈哈谢谢老赵!
    拿了这个软件好几天了
    愣是没研究明白怎么用
    今天是第一次会用一点点了^_^

  22. ghnet
    *.*.*.*
    链接

    ghnet 2010-01-04 22:12:00

    听了你的Webcast跑来搜索 fiddler,结果收获两个超好用的软件,谢谢了

  23. Kevin Yang
    *.*.*.*
    链接

    Kevin Yang 2010-01-28 00:13:00

    都把flv下载到本地了,干嘛不直接打开??

  24. 老赵
    admin
    链接

    老赵 2010-01-28 00:54:00

    Kevin Yang:都把flv下载到本地了,干嘛不直接打开??


    其实如果您没有看文章的话,完全可以不回复的,呵呵。

  25. Kevin Yang
    *.*.*.*
    链接

    Kevin Yang 2010-01-29 13:39:00

    @Jeffrey Zhao
    看了,但是看了后面,忘了开头~你的意思是这样就可以视频和PPT同步来看了。
    有一个问题不是很明白,因为你的做法实际上就是缓存的原理,这和直接利用浏览器缓存有什么不同?就是我开着浏览器,等flv文件下载完了,我再去看,有什么不同?望指教

  26. 老赵
    admin
    链接

    老赵 2010-01-29 13:41:00

    @Kevin Yang
    浏览器单线程下载慢,用下载工具下载快。
    今天下完明天看,明天看一半后天继续看。

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我