introduce fiddler tips and tricks

介绍 Introduce Fiddler Tips and Tricks

Fiddler常用技巧

钟 志

去哪儿无线事业部

2013-11-30

xunlei sina baidu qunar

网名：西风瘦马

• 热爱前端和新技术

• 爱好摄影和美食

• W3C HTML5 中文兴趣小组成员

http://pad.qunar.com

Fiddler 使用技巧

目 录

1. 认识Fiddler

2. 常用功能

3. 扩展Fiddler

4. 常见问题

5. 相关资源

Fiddler — 网页调试代理服务器

Fiddler是一个HTTP调试代理，它能够记录并检查所有电

脑和互联网之间的HTTP通讯，设置断点，查看Fiddler所

有的“进出”的数据。

1.1

Internet

ExplorerWinINET

Office

CryptoAPI WinHTTP

Fiddler

Firefox

CorpNET

Proxyexample.com

Firewall

Fiddler工作原理 1.2

Fiddler是一个通过捕获HTTP请求和响应内容达到调试目

的代理服务器。

安装合适的Fiddler 1.3

1. 先安装 Microsoft .NET Framework

2. 去官方下载最新版本

http://fiddler2.com/get-fiddler

Sessions List

QuickExec Box

Tabs

界面一览 1.4

Fiddler 使用技巧

目 录

1. 认识Fiddler

2. 常用功能

3. 扩展Fiddler

4. 常见问题

5. 相关资源

所有进程

浏览器进程

单一进程

自定义过滤

过滤指定的会话 2.1

Fiddler提供了多种会话过滤方式：

右键菜单select

Find sessions

QuickExec命令

找到所需的会话 2.2

Fiddler提供了多种方式快速定位所需的会话：

• ?sometext

• >size

• =status

• =method

• bpafter

• urlreplace

• start

• stop

QuickExec Box

快速执行盒子能让你快速启动一个命令脚本，它可以选

择你需要的会话，也可以执行一些功能性的函数

2.3

断点，调试器的功

能之一，可以让程序

中断在需要的地方，

从而方便其分析。

“

Breakpoint 2.4

2.5.1

Timeline View 2.5

在时间视图上，你可以直观的以瀑布流的方式看到HTTP

请求

瀑布图 2.5.1

1. 在会话列表中选择多个会话

2. 选择Timeline tab

Streaming Mode 2.5.2

在该模式下，breakpoint失效，接收到服务器内容返回

时立即返回给浏览器，不在Fiddler缓存

流媒体播放页面必须使用该模式

Simulate Mode Speeds 2.6

模拟低网速，用于调试2G网络

禁用缓存 2.7

开发时禁用缓存

Chrome Dev Tools有类似的功能

Fiddler HOSTS 2.8

The HOSTS... command on the Tools menu allows

you to easily retarget requests from one host to

another.

Windows HOSTS 2.8.1

Windows HOSTS VS. Fiddler HOSTS 2.8

系统级别 软件级别 1

不太方便 使用方便 2

安全软件还原 支持端口 3

录制/还原会话信息 2.9

1. 保留现场，录制会话信息，导出.SAZ文件

2. 调试时导入.SAZ，还原现场

比较会话 2.10

比较两个网络会话的数据信息差异

需要安装有DIFF工具

Composer – 请求构造器 2.11

旧版中的Request Builder

快速克隆会话信息，发起请求

表单提交类网页开发时尤其有用

拖拽

AutoResponder 2.12

这可能是前端工程师使用频率最高的一项功能

它能将一个URL映射到本地文件

从此，调试线上bug不再困难。。。

匹配规则和响应方式 2.12

匹配规则

1. 明文模糊匹配

2. 严格精确匹配

3. 正则匹配

响应方式

1. 本地文件

2. 网络文件

3. 其他操作

1. 关闭Fiddler

2. 在“Internet选项”中设置代理

3. 开启Fiddler（检查About窗口）

和其他翻墙代理一起工作 2.13

将Fiddler与其他代理服务器一起工作

一边翻墙，一边开发

我是Mac党？

移动互联网时代，前端开发需要面对的终端更多……

2.14

Fiddler

Mac

Li

nu

x Po

cket

PC

P

C

Internet

其他操作系统下使用Fiddler 2.14

修改配置

1. Tools Fiddler

Options

Connections

2. 选中【Allow

remote

computers to

connect】

3. 重启Fiddler

4. 将设备的代理服

务器设置为

2.14

X.X.X.X : 8888

Fiddler 使用技巧

目 录

1. 认识Fiddler

2. 常用功能

3. 扩展Fiddler

4. 常见问题

5. 相关资源

FiddlerScript脚本 3.1

Fiddler包含一个简单却功能强大的基于JScript.NET事件

脚本子系统，它的灵活性非常棒，可以支持众多的HTTP

调试任务。

CustomRules.js 3.1

Fiddler插件

http://fiddler2.com/add-ons

分为两类：

1. 官方插件

2. 第三方插件

3.2

3 Syntax-Highlighting add-ons

代码高亮插件，会在以下几处地方高亮代码：

• Script Editor

• Fiddler Script Tab

• Inspectors SyntaxView

3.2.1

JavaScript Formatter 3.2.2

JavaScript代码美化插件，可以在加载后美化，也可以在

发送给浏览器之前自动美化，便于代码调试。

目录替换

项目配置管理

自定义颜色

上下行网速限制

http://code.google.com/p/stave/

Stave add-ons 3.2.3

用.NET扩展Fiddler 3.3

通过 IFiddlerExtension 接口来扩展Fiddler，可以使用

任何.NET语言来开发，与FiddlerScript相比，好处是：

1. 更加丰富的UI组件

2. 更便于安装传播

Fiddler 使用技巧

目 录

1. 认识Fiddler

2. 常用功能

3. 扩展Fiddler

4. 常见问题

5. 相关资源

启动时报错

本地未安装Microsoft .NET

Framework，或者安装的版本过低，请

安装 http://www.microsoft.com/zh-

cn/download/confirmation.aspx?id=

1639

安装后不能正常启动 4.1

抓不到Firefox的数据包

1. 检查是否安装了FiddlerHook插件，并启用了该插件

2. 设置是否正确

抓不到Firefox的包 4.2

抓不到Chrome/IE的数据包

是否安装了代理服务器类的浏览器插件，禁用此类插件

抓不到IE/Chrome的包 4.3

Fiddler 使用技巧

目 录

1. 认识Fiddler

2. 常用功能

3. 扩展Fiddler

4. 常见问题

5. 相关资源

官方网站 http://www.fiddler2.com/

文档 http://fiddler2.com/documentation/

讨论组 https://groups.google.com/forum/?fromgroups#!forum/httpfiddler

视频教程 http://www.youtube.com/playlist

相关资源 5.1

你遇到哪些

问题

钟 志 zhong.zhi@163.com weibo.com/zhongzhi