Web调试：Fiddler 入门

Fiddler.png

这篇文章主要是介绍 Fiddler 工具的一些简单、好用的功能。在这之前，我们先简单的介绍一下 fiddler。

Fiddler

The free web debugging proxy
for any browser, system or platform

上面是 fiddler 官网对它自己的介绍，再看一下百度百科对fiddler的简介。

Fiddler 是用C#写出来的,它包含一个简单却功能强大的基于JScript .NET 事件脚本子系统，它的灵活性非常棒，可以支持众多的http调试任务，并且能够使用.net框架语言进行扩展。

从上面百科的介绍可以知道，Fiddler 是依赖 .NET Framework 的，也就意味着它只能支持 windows 系统，这也是长久以来 fiddler 短板。不过借助 Mono 项目，Fiddler 实现了跨平台使用，具体如何在windows 以为的系统使用 fiddler可以去百度一下。

使用场景

其实现在的 Chrome Devtools 已经非常强大了，我们使用它已经能够帮助我们解决大部分问题，但是还是有一些问题，单独使用 chrome devtools 无法解决或比较麻烦，所以我们在开发的过程中，结合使用 chrome devtools 和 fiddler，完美！下面列举一些需要使用 fiddler 的场景。

在此之前，我们先简单的看一下 Fiddler 内部长什么样子，如下图，左侧是 Fiddler 截获的请求链接，右侧是编辑区，可以去进行一系列操作。

Fiddler.png

修改 Request 请求参数
比如你请求 getOrderList.do ，将支付状态 payStatus 由 false 改 true 从而获取已完成订单列表。
这个场景偶尔会用到，在 chrome 里操作会比较麻烦，首先我们需要在请求发送前，使用断点断住，再修改请求参数的值，再放开断点。这样做的麻烦之处便是找断点的位置。特别是对于压缩后的代码。
修改 Response 返回数据
比如你请求 /isLogin.do 接口，一直返回 false，当时你想测试 true 的效果
请求代理
1）这个用的就比较多了，比如将线上某个页面出了问题，你在本地修改后，使用 fiddler 将线上页面代理到本地，就能看到修改后的效果了。
2）可以将线上某个接口代理到本地文件，使得可以随意修改接口返回数据，类似于修改 Response 返回数据
3）可以将本地接口代理到线上指定接口，可以在开发环境中使用线上真实数据作为模拟数据，你说怕不怕。对于UI改版的项目（后台接口没变），异常适合。

Fiddler 常用方法

Fiddler 的使用方法很多，这里会介绍几个工具，用来解决上面的使用场景，工具包括：AutoResponder、Filters。

Filters过滤器

Filters 过于强大，请自行研究，这里请看 Breakpoints 。相信大家都能看懂什么意思，断点都断住了，怎么解决场景1、场景2 也就不用我说了，哈哈。

Filters.png

当然 场景1、场景2还有一种方法，就是在Rules ->Automatic Breakpoints。请看下图，不过该功能影响范围较广。推荐使用快捷键来操作。

Rules.png

AutoResponder

这个便是我使用fiddler最多的功能了，我们的场景3都可以在这里得到解决。下面我们先看一下AutoResponder长什么样子。

AutoResponder.png

操作很简单，一般我们先选中左侧的一个请求，然后点右侧的 Add Rule，这样就会在列表里新加一条记录。我们可以在Rule Editor里修改这个这条记录。下面介绍一下简单的规则

// Rule Editor
// EXACT 表示精确匹配， regex 表示正则表达式。

1、如图第一条，表示精确配一条请求，并代理到本地桌面 toubasic.html 文件。
EXACT:http://member.kaike.la/member/member/toubasic.do
C:\Users\zjruan\Desktop\toubasic.html

2、如图最后一条，表示将所有本地的.do后缀的请求，代理到 member.kaike.la 上
regex:^http://localhost:3000(.*)(\.do)(.*)$
http://member.kaike.la$1$2$3

最后再送上【正则表达式传送门】，所谓正则在手，天下我有。

作者：zjruan 
日期：2017-04-07
关键词：调试、fiddler、autoResponder