通过本文,您可以学习到 Fiddler 的基本介绍以及Inspectors、Composer、Statistics 和 Timeline 应用。

写在前面

一直想写一些关于 HTTP 抓包技术的应用,终于,在博客多月长草后写下此文。

前言

在 Web 开发过程中,监控 HTTP 请求最常用、最方便的,莫过于 Chrome 中的开发工具之 Network 选项卡了。

但是,Network 也有很多不是特别方便的地方,例如:

  • Replay Network 不能修改 Http Header
  • Http Request 无法断点
  • 只能依赖系统或者插件修改 HOST
  • 无法直观的查看 ResponseBody 格式(尽管有 Preview 窗口)

等等。

在 Windows(移动设备) 下,用 Fiddler 调试 HTTP 请求,除了能满足以上的要求外,不二的选择:

  • 更强大的 HTTP 请求历史筛选
  • 更强大的性能分析
  • 更多的数据展示方式:HexView、WebView、SyntaxView
  • 强大的数据过滤方式
  • 灵活的扩展脚本
  • Remote Debug

或许把 Browser 和 HTTP Proxy 对比或许有些欠妥,笔者只是将 Fiddler 的强大优点列出来让大家感受一下与 Chrome Network 的区别。

但做为一个 Web 开发人员,能熟练地调试 HTTP 请求能最快速的提高生产力,是不可或缺的一项技术和能力。

准备开始

以下是原材料:

Fiddler Web Debugger 4.6

安装步骤很简单,省略一万字。

开启 Fiddler

做为一款强大的 HTTP 调试工具,Fiddler 的图标改过二次版,如今变成一个翻转 90 度的绿色正方形+F。

外形低调不张扬的 Icon 却依旧掩盖不住他强大:

Fiddler.png

Fiddler 的启动界面:

open.jpg

Tips 1:
启动后, Fiddler 会直接对系统代理进行更改,拦截所有 HTTP 请求,(依赖 Wininet API)
如果你要调试的 HTTP 请求没有进入 Fiddler,说明对应的程序没有走系统代理而是直接请求出去了。
笔者曾经开发 Windows 客户端时遇到过这个问题,后来使用 InternetQueryOption API 解决。

Tips 2:
当你只需要对某一个程序进行 HTTP请求调试时,不妨试试点击 Toolbar 中的 AnyProcess 按钮 ,然后拖至你想要调试的应用程序窗口。--> anyprocess.jpg

Tips 3:
F12 可以快速切换是否拦截 HTTP 请求。

Fiddler 之 Inspectors

本章你可以学习 Inspectors 的几个功能:

  • 如何使用 Fiddler 基础功能 Inspectors
  • 如何查看 Raw 数据

最初,我们可以非常直观、简单的使用 Fiddler,就是你点击左边的 Request Log 中的任意一条记录,

select_history.jpg

界面右边会自动切换到 Inspectors,其中,

上方框架中是请求发出去的包:Header + Request Body,下方显示是对应返回的数据:

inspectors.jpg

是不是非常熟悉?那么,我们把 Request 和 Response 的选项卡调到 Raw,也就是原始数据:

inspector_raw.jpg

HTTP 请求的最原始数据也就展现在面前了,你可以通过分割线中间的输入框来搜索 Request,或者下方的输入框来搜索 Response 数据,简单、方便。

Tips 1:
当今 gzip 已经成为 HTTP 压缩的标准之一,
几乎每一个基于文本的 HTTP 请求回来后,Inspectors 中的 Raw 标签下会有一个黄色的条告诉你:
Response is Encoded and many require decoding before inspection, Click here to transform.
点击 Toolbar 上方的 Decode 按钮,可以自动 Decode:inspector_decode.jpg

Fiddler 之 Composer

本章你可以学习 Composer 的几个功能:

  • Parsed 请求
  • Raw 请求
  • ScratchPad 面版使用
  • Option 说明

打开右侧的 Composer,可以看到第一个是 Parsed 选项卡,非常简单、明了的 HTTP 请求表单,

在表单中,我们可以随意输入任何 HTTP 请求,例如,对 www.baidu.com 发送一个 HTTP 请求,

并带上 Header(钩中 Log Requests):

User-Agent: Iphone
Send-By:Fiddler

composer.jpg

然后,我们可以在左边的 Request Log 中找到这个请求:

composer_log.jpg

Composer 第二个选项卡是 Raw,也就是原始请求,

如果你熟悉 HTTP 请求,可以直接手工输入:

composer_raw.jpg

Composer 第三个选项卡是 ScratchPad,也就是可以同时保存多条原始请求,

然后选择性的发送,发送发方法就是选择高亮你要发送的请求,点击 Execute:

composer_ScratchPad.jpg

最后,Option 选项:

  • Inspector Session:使用同一个 Session 进行连接(同一个域名或者主机的情况下)
  • Fix Content-Length Header: 当你发送 Post 请求时,自动加上或者修正 Header 中的 Content-Length.
  • Follow Redirect:自动根踪 HTTP 状态码为 301 和 302 中返回带 Location 的请求。
  • Automatically Authenticate:自动进行身份验证。
  • Tear Off:将 Composer 变成一个浮动窗口。

Fiddler 之 Statistics 和 Timeline

Fiddler 在时间与性能方面监控着实下了大功夫。在 Statistics 选项卡下,能看到诸如此类的时间:

  • ClientConnected
  • ClientBeginRequest
  • GotRequestHeaders
  • ClientDoneRequest
  • Determine Gateway
  • DNS Lookup
  • TCP/IP Connect
  • HTTPS Handshake
  • ServerConnected
  • FiddlerBeginRequest
  • ServerGotRequest
  • ServerBeginResponse
  • GotResponseHeaders
  • ServerDoneResponse
  • ClientBeginResponse
  • ClientDoneResponse
  • HeaderLength

甚至 ESTIMATED WORLDWIDE PERFORMANCE,不同网络下不同时的时间预测。

同样,在 Timeline 下,我们可以选择一个或者多个请求,查看对应的请求时间:

timeline.jpg

写在(一)结束

看完这些,如果你是一个 Web 开发人员,应该明白 Fiddler 最基础的用法了。

希望对你们有帮助。

在(二)中,将有更深层次基础教程:

  • Filter:如何通过 Filter 过滤请求
  • AutoResponser:如何通过 AutoResponser 来建立规则、重写请求。
  • TextWizard:小工具的使用
  • HOST:简单好用的 HOST 修改神器
  • RemoteDebug:远程设备的 Debug

在(三)中,主要讲解 HTTP 断点和 Fiddler Script 的使用:

  • Fiddler 中 Request 断点的使用
  • Fiddler 中 Response 断点的使用
  • Fiddler Script 的说明和简单应用

不出意外,在第(四)以后将是 Fiddler 的实战应用,欢迎关注。

原文地址:http://djunny.com/html/2015-11/15/Fiddler1.html
转载请注明来自:爪子的博客(http://djunny.com/)