使用fiddler调试本地js,fiddler配置及使用教程

本文目录一览：

• 
  1、Fiddler中创建AutoResponder规则之替换图片、JS文件
  


• 
  2、如何设置fiddler对nodejs进行抓包
  


• 
  3、Fiddler抓包入门
  


• 
  4、如何使用Fiddler调试线上JS代码
  


• 
  5、fiddler中利用AutoResponder【重定向功能】 进行调试
  


• 
  6、Fiddler 使用10问10答（一）
  

Fiddler中创建AutoResponder规则之替换图片、JS文件

一．使用Fiddler进行文件替换

Fiddler 的AutoResponder tab允许你从本地返回文件，而不用将http request 发送到服务器上。

1．图片替换

a． 打开百度图片首页:image.baidu.com；

b． 打开Fiddler 找到其中一张图片的会话： （该图片对应下图1），把这个会话拖到AutoResponer Tab下（图2）

如何设置fiddler对nodejs进行抓包

首先要确保手机和安装有Fiddler的计算机处在同一个局域网中，可以使用路由器，或者使用笔记本发送热点给手机使用。在这里本人是使用手机USB共享功能让笔记本联网的。进入cmd输入ipconfig/all。查看IPv4地址，如下图。下面设置代理需要用到该地址。

打开Fiddler。在Tools中选择【Fiddler Options】。选择选项卡【HTTPS】在apture HTTPS CONNECTs前打钩。

选择选项卡Connections，按下图钩选相应的项。注意到Fiddler listens on port:8888。这是Fiddler默认的监听地址。也就是我们在设置代理时使用的端口号。一般保持不变就好。

下载证书。可以在电脑中输入本机的回传地址，端口号是8888如下图所示，点击最下面的【FiddlerRoot certificate】即可下载，发送到手机安装证书，具体证书的安装方法自己百度。或者在手机浏览器中输入第一步得到的IPv4地址：8888也行。

手机端的配置。手机进入wifi配置界面，如下图。这里的主机名就是第一步的IPv4地址。端口号为8888。前面已经多次提到。配置成功后点击【确定】。然后断开wifi，关闭Fiddler。重新连接wifi在打开Fiddler。

经过以上的配置后，就可以用Fiddler监控到手机的上网行为了。以下是在手机UC中打开sina的捕获图。可以看到有很多与其他站点的通讯，可以使用过滤或者关闭一些后台程序来净化。

Fiddler抓包入门

抓包使用场景：

1、用手机APP或浏览器访问一个页面，查看请求的结果是否正确，请求的参数是否正确

2、在不修改任何环境的情况下，修改返回的结果，即通常所说的mock

3、复杂场景：

比如，同一个域名下的请求，/img/xxx的资源发送到ServerA上，请求/api/xxx资源发送到ServerB上

我们使用浏览器或者客户端软件都要与外界进行通信，就必然会有数据的发送和接收，有时候需要对这些传递的数据进行分析，因此需要截获这些传递的数据。

其中对这些数据进行截获、重发、编辑、转存的过程叫做 抓包 。

本地应用与服务器之间所有的Request 和Response都将经过Fiddler，由Fiddler进行转发，此时Fiddler以代理服务器的方式存在。

由于所有的网络数据都会经过Fiddler，因此Fiddler能够截获这些数据，实现网络数据的抓包，可以详细地对HTTP请求进行分析，并模拟对应的HTTP请求。

1、本地化的工具，是一个使用本地 127.0.0.1:8888 的 HTTP 代理

(免费的web调试代理工具，支持任何浏览器、系统或平台)

启动Fiddler后，通过浏览器访问：

（1）任何能够设置 HTTP 代理为 127.0.0.1:8888 的浏览器和应用程序都可以使用 Fiddler

（2）工具打开后，就自动设置了IE浏览器的代理，工具关闭后，IE的设置也将被还原

2、Fiddler本身对http协议支持较好，且操作简单容易上手

3、具有抓包和分析功能，省去了安装其他工具的必要

4、工具本身功能强大

（1）劫包：模拟接口不给前端返回数据，看前端怎么处理，如果没有工具，就只能采用断网、停用服务器

（2）篡改数据：假设没法去模拟前端对于接口返回数据很长时，怎么去展示，换行？截取？小屏幕上页面扭曲？如果通过篡改数据，就能直观的把数据返回给前端展示，很明显的看到前端数据是什么样的，就不需要从底层改数据

（3）模拟低速、弱网环境等，有些元素加载不出来会导致样式问题

网络爬虫是自动爬取网页的程序，在爬取的过程中必然会涉及客户端与服务端之间的通信，也需要发送一些HTTP请求，并接受服务器返回的结果。

有些网址变化肉眼是看不出规律的，这时配合抓包软件会变得较容易。

案例：网页底部“阅读更多”

在浏览一些图片网站时，浏览到最下面的时候会出现一个“阅读更多”的字样，此时单击“阅读更多”页面上显示更多内容，加载出来的内容跟原来的内容是在同一个网页上展示的。我们直接看网址的变化是看不出任何规律的，便无法分析该请求是如何实现的，无法通过程序构造出该请求。

此时可以通过Fiddler 进行抓包，对这些数据进行分析，查看request headers 发现是通过Get请求来实现的，总共有3个参数：order_by、page、per_page

通过分析就可以知道页面上只显示20篇文章，之后就需要通过 阅读更多 进行加载

每点击一次 阅读更多 ，相当于在修改page值

知道实现规律后，就可以通过编写程序构造出对应的请求，并由程序自动地实现这些请求的发送。

假如修改page为3、4、5，在新窗口进行访问，与页面阅读更多进行比对

Fiddler 默认是抓 http请求的，对于pc上的 https请求，会提示网页不安全，这时候需要在浏览器上安装证书

Fiddler可以通过伪造CA证书来欺骗浏览器和服务器，大概原理就是在浏览器面前Fiddler伪装成一个HTTPS服务器，而在真正的HTTPS服务器面前Fiddler又装成浏览器，从而实现解密HTTPS数据包的目的。

1、检查Fiddler设置

2、导出证书

3、导入到Firefox浏览器

测试下结果，打开百度网页，成功了，接下来就可以进行抓包了

1、cls （或 clear） 清屏命令

清空会话列表中的所有会话

2、select 筛选某一类型的会话命令

如 select html ，输入命令后敲回车键，在会话列表中所有html类型的会话都已被选中

3、？ 查找网址中包含某些字符的会话信息

如 ？jianshu 可以查找出网址中包含“jianshu”字符串的会话信息，跟其他会话信息用不同颜色区分显示

4、help 帮助命令

打开官方的使用页面介绍，所有的命令都会列出来

5、bpu、bpafter 断点命令

6、dump 快速保存

以 铁路网的货物跟踪 为例

页面有车号、货票号、验证码三个字段，通过输入不同格式的值来观察页面提示与 Fiddler 抓包返回的 json值

1、先输入格式正确的值，点查询

2、修改货票号的位数，点查询

1、两次抓包的接口是一样吗？第一个是post，第二个是get，不是同一个

2、第二个请求没有发出去，应该是前端直接对数值的位数做了校验的，这个时候就不会调接口，所以就没有数据显示了

如想更深入的使用Fiddler，请查看 进阶篇

如何使用Fiddler调试线上JS代码

g.) 今天分享一下如何用Fiddler来修改并调试线上的JS代码. 以博客园首页为例子,用我本地的一个js文件来替换它的一个js. 查看首页源码发现一个js,就拿它开刷了. 打开fiddler,捕获博客园的首页请求. 找到“aggsite.js”的请求. 这里有个技巧,可以通过 “select”命令来筛选js请求. 在下面的命令框输入“select script”回车即可. 如下图. 接着把这个请求拖动到“AutoResponder”面板. 拖动之前记得先勾

fiddler中利用AutoResponder【重定向功能】 进行调试

一、将服务器的返回数据（即原资源）重定向到本地的文件进行调试

1、打开fiddler，打开浏览器输入(已百度为例)，再回到fiddler进行设置

2、按照截图所示，分别将4个选购全部勾选，勾选完成后，将待重定向的网址直接拖到右方【手动填写完整地址/正则表达式进行模糊匹配的地址】即可 

3、填写要替换的内容，下拉框有很多选项可以选择， 比如201、302、404，502等status code 

注，我的一开始是404_Plain.dat

4、设置完成之后，刷新百度网页，请求回来的数据已经是替换后的内容了 

注：想取消的话，直接将第1步中勾选的Enable rules去掉即可

二、利用AutoResponder【重定向功能】修改返回response的数据

1、在fiddler中打开百度，选择SyntaxView的内容进行复制，保存到本机上，以baidu.html格式进行保存

2、点击AutoResponder，把刚才的网址拖到右边

3、第一个下拉框选择Header:Accept=html

    第二个下拉框选择你刚才保存baidu.html的路径

4、勾选Enable rules之类的四个，然后点击保存

5、再访问百度

注：想取消的话，直接将第1步中勾选的Enable rules去掉即可

Fiddler 使用10问10答（一）

背景：下面这些问题都是我了解使用Fiddler阶段遇到的初级问题，解决方案或许不确切，这里仅供参考，后续持续变更。

1.打开Fiddler后，打开Chrome浏览器，输入网址提示“您的连接不是私密连接”

解决方法：取消HTTPS下的Decrypt Https Traffic的勾选，如图，再次打开网站后提示会消失

2.为什么要设置断点及设置断点原理

*首先Fildder工作原理：在服务端和客户端之间充当代理服务器

*断点：简单举个例子，当需要修改服务端在客户端显示内容，或者需要修改客户端密码都可以设置断点。

3.inspectors下webforms表格内容点击后无反应，无法修改内容

试了好久才发现使用bpu xx命令后，设置断点未成功，点击Rules-Automatic Breakpoins-Before Requests设置所有断点，一般设置断点成功后，会有红色图标出现，如下图

4.输入bpu 命令后，断点设置/取消失败，无红色图标出现

   尝试浏览器使用IE试一试

5.filder 如何停止自动抓包

点击左下角的Capturing按钮

6.如何清除抓包记录

在上图黑色文本框中输入cls

7.如何查询特定网站记录

打开Fillder，键盘同时按下【Ctrl】+【F】键，在搜索框输入网站网址，点击确定后（默认黄色显示）指定网站记录

8.Before request和After response不同

*Before Request请求调试、After Response 回发调试

*执行请求调试步骤：Before Request-修改数据-Run to Completion

  执行回发调试步骤：Before Request-Break on Response-修改数据-Run to Completion

9.Break on Response和Run to Completion区别

*Break on Response拦截服务器会发数据、Run to Completion执行修改过的数据或是继续执行

*Break on Response当涉及到修改服务器返回数据时需要点击，之后再点击Run to Completion继续运行；当涉及到修改请求的数据时，直接修改完成后点击Run to Completion即可

10.执行请求调试步骤：修改表单内容成功后点击Run to Completion，页面无反应(一直处于刷新状态)（例如登录页面输入正确的用户名、密码后会成功登录）