# fiddler使用说明

测试前端过程中，经常需要验证各种功能状态、不同数据层级等返回后的展示效果。一般会通过以下三种方式进行测试：

1.构造满足条件的测试数据；（耗时费力）

2.修改数据库；（前提需要了解数据库数据存储、沟通成本高）

3.通过网络代理截获返回的数据进行修改。（成本低、即时修改即时测试、不需要打扰后端修改数据库）

综合，第三种方式较方便且灵活。最近在用抓包工具fiddler，以下通过fiddler介绍如何修改response返回结果。

第一步：下载fiddler的最新版本；

运行fiddler之后测试要调试的页面是否可以捕获，刷新页面后左边列表会实时显示目前http请求的条目。如图红色部分

[![](https://camo.githubusercontent.com/a714caf2b2fbde7adb3124690d4af62c46a4e4fa2edb7e5087bee7819bb66dad/68747470733a2f2f696d67323031382e636e626c6f67732e636f6d2f626c6f672f313139303332392f3230313930372f313139303332392d32303139303731323131353834383232372d3736323033393530302e706e67)](https://camo.githubusercontent.com/a714caf2b2fbde7adb3124690d4af62c46a4e4fa2edb7e5087bee7819bb66dad/68747470733a2f2f696d67323031382e636e626c6f67732e636f6d2f626c6f672f313139303332392f3230313930372f313139303332392d32303139303731323131353834383232372d3736323033393530302e706e67)

第二步：开启断点捕获数据：

点击菜单栏按钮【Rules】—【automatic Breakpoints】-【After Response】，意思是要在请求返回后修改返回结果。

这个时候开始刷新页面，会发现页面卡着不动，Fiddler左边的转台框http请求前出现红色框框，这个时候说明配置成功；找到需要修改的接口，如果没有，这个时候在命令行中输入【go】命令放行，直到要修改的接口出来。

[![](https://camo.githubusercontent.com/cb31db77207eed31ee67dda62e5114422b674251ab3a470aa76868a1f0e1e5a8/68747470733a2f2f696d67323031382e636e626c6f67732e636f6d2f626c6f672f313139303332392f3230313930372f313139303332392d32303139303731323131353930393530332d3931333332303233322e706e67)](https://camo.githubusercontent.com/cb31db77207eed31ee67dda62e5114422b674251ab3a470aa76868a1f0e1e5a8/68747470733a2f2f696d67323031382e636e626c6f67732e636f6d2f626c6f672f313139303332392f3230313930372f313139303332392d32303139303731323131353930393530332d3931333332303233322e706e67)

接口找到后，查看右侧response的选项卡【Transformer】，记住当前选中的编码格式，默认【chunked Transfer-Encoding】是选中的，去掉之后下方【HTTP Compression】选中在【GZIP Encoding】上的，没有的话最好，要记住选项，我们在这里统一勾选【no Compression】意思是不压缩，如果不点你的代码没办法修改是乱码的。修改完之后记得是要点回来的，重新压缩在发送。

[![](https://camo.githubusercontent.com/b5637b6243bc0b049b254ed5496cd26f210e96506f3098de50f07e3e7eaacd3a/68747470733a2f2f696d67323031382e636e626c6f67732e636f6d2f626c6f672f313139303332392f3230313930372f313139303332392d32303139303731323131353932383230392d38363933343438372e706e67)](https://camo.githubusercontent.com/b5637b6243bc0b049b254ed5496cd26f210e96506f3098de50f07e3e7eaacd3a/68747470733a2f2f696d67323031382e636e626c6f67732e636f6d2f626c6f672f313139303332392f3230313930372f313139303332392d32303139303731323131353932383230392d38363933343438372e706e67)

第三步：然后点击【Textview】修改需要的返回结果。

[![](https://camo.githubusercontent.com/92441d367b58346f11a5aae5a000464263d4bf155607bb924f500ae00d45b489/68747470733a2f2f696d67323031382e636e626c6f67732e636f6d2f626c6f672f313139303332392f3230313930372f313139303332392d32303139303731323131353934343030312d313030363032343634312e706e67)](https://camo.githubusercontent.com/92441d367b58346f11a5aae5a000464263d4bf155607bb924f500ae00d45b489/68747470733a2f2f696d67323031382e636e626c6f67732e636f6d2f626c6f672f313139303332392f3230313930372f313139303332392d32303139303731323131353934343030312d313030363032343634312e706e67)

第四步：修改完成后，第二步中选项卡【Transformer】的编码格式要重新设置回去，重新压缩在发送。点击【Run to Completion】。

第五步：验证页面是否按照修改预期展示。

**fiddler如何只抓取指定浏览器的包**

在实际工作中，常常会抓取浏览器的数据，其加载的数据较多，不好区分，不知道其是哪个是需要抓取的数据，所以就需抓取指定浏览器的数据，这样就能很清晰知道数据的来源。

步骤一：

打开fiddler，再打开浏览器

步骤二：

点击下图中的捕捉按钮，按钮处的文案将显示成"pick target"，拖动鼠标至特定浏览器页面并放开鼠标，此时浏览器名称及占用端口号将显示在捕捉按钮之后

[![](https://camo.githubusercontent.com/d3de4202f7849d6c153da3575ec83c99bea5c2908ec1d1f76bb5d80ac0065b8c/68747470733a2f2f696d672d626c6f672e6373646e696d672e636e2f32303139303630333134303432383732352e706e673f782d6f73732d70726f636573733d696d6167652f77617465726d61726b2c747970655f5a6d46755a33706f5a57356e6147567064476b2c736861646f775f31302c746578745f6148523063484d364c7939696247396e4c6d4e7a5a473475626d56304c3355774d5449784d44597a4d44593d2c73697a655f31362c636f6c6f725f4646464646462c745f3730)](https://camo.githubusercontent.com/d3de4202f7849d6c153da3575ec83c99bea5c2908ec1d1f76bb5d80ac0065b8c/68747470733a2f2f696d672d626c6f672e6373646e696d672e636e2f32303139303630333134303432383732352e706e673f782d6f73732d70726f636573733d696d6167652f77617465726d61726b2c747970655f5a6d46755a33706f5a57356e6147567064476b2c736861646f775f31302c746578745f6148523063484d364c7939696247396e4c6d4e7a5a473475626d56304c3355774d5449784d44597a4d44593d2c73697a655f31362c636f6c6f725f4646464646462c745f3730)

[![](https://camo.githubusercontent.com/8c07fb201d824ae9a9ce2d78586438cca921b0161b5c27d948986d550d0dbfce/68747470733a2f2f696d672d626c6f672e6373646e696d672e636e2f32303139303630333134303530343536392e706e673f782d6f73732d70726f636573733d696d6167652f77617465726d61726b2c747970655f5a6d46755a33706f5a57356e6147567064476b2c736861646f775f31302c746578745f6148523063484d364c7939696247396e4c6d4e7a5a473475626d56304c3355774d5449784d44597a4d44593d2c73697a655f31362c636f6c6f725f4646464646462c745f3730)](https://camo.githubusercontent.com/8c07fb201d824ae9a9ce2d78586438cca921b0161b5c27d948986d550d0dbfce/68747470733a2f2f696d672d626c6f672e6373646e696d672e636e2f32303139303630333134303530343536392e706e673f782d6f73732d70726f636573733d696d6167652f77617465726d61726b2c747970655f5a6d46755a33706f5a57356e6147567064476b2c736861646f775f31302c746578745f6148523063484d364c7939696247396e4c6d4e7a5a473475626d56304c3355774d5449784d44597a4d44593d2c73697a655f31362c636f6c6f725f4646464646462c745f3730)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://qiangrens-organization.gitbook.io/qkd90/fu-wu-qi-yun-wei-he-ce-shi/ce-shi/fiddler-shi-yong-shuo-ming.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.