fiddler与浏览器抓包操作

Posted 2023-04-08

参考技术A Elements：审查元素(ui自动化需要用到)

Console:日志(前端的交互环境)

Network:抓包工具

Application：浏览器缓存(cookies在这里面)

注：修改后需重新打上对勾

cmd输入ipconfig查看本机ip

手机跟电脑需要在同一局域网中

手机操作：设置-选中连接的WiFi-修改网络-显示高级选项-代理选择为手动

电脑的弹窗点击确认

注：如手机连接代理后无法上网，可能是因为电脑的防火墙功能，把fiddler添加到允许应用通过防火墙即可

fiddler与Charles的区别

参考技术A 一、Fiddle2(v2.4.2.6，windows)

      fiddler除了常规的替换http请求、模拟慢网速外，还有一些日常开发里能用到的特殊功能。

1. http代理服务器

      fiddler启动的时候就会启动代理服务器服务，并监听8888端口。这种方法可以捕获以其为代理服务器的请求：如虚拟机里的浏览器、远程主机的请求等等。举个例子：把虚拟机的浏览器添加代理服务器到fiddler，而且多个虚拟机的浏览器都可以共用一个fiddler，在fiddler里面可以实现其常规的功能。

配置步骤：

1) 主菜单Tools——Fiddler Options

2) 如图：

3) 设置浏览器的代理服务器为fiddler所在机器的ip+host，这里的浏览器可以是虚拟机里的、局域网的另外一部电脑、移动设备……

注：windows和mac下的代理设置，在浏览器的更改代理服务器菜单可以打开该界面。

4)  done，查看http、替换http等等……

二、Charles(v3.5.2，mac&windows)

     Charles是mac os和windows下的另外一个抓包软件（均收费，可破解），功能与fiddler类似，优点是可以自定义上下行网速、External Proxy、反向代理配置简单、可解析AMF协议数据……

1. http代理服务器

     该功能和fiddler的比较类似，也是启动时就会开启代理服务器服务，默认监听8888端口，实现的功能也基本雷同。

如果需要改变监听的端口可以按照以下的步骤更改：

1) 主菜单Proxy——Proxy Settings

2) 如图：

3) 同fiddler

2. External Proxy

该功能可以把经过Charles的请求转到其他代理服务器（如fiddler），适用于特殊情况下需要用到两个软件的特点进行开发的时候。 

配置步骤：

1) 主菜单Proxy——External Proxy Settings

2) 如图，所填分别为fiddler所在机器的ip和其监听的host：

3) 访问一个网站，现在可以看到Charles和fiddler的界面同时捕捉到了一样的http请求。Fiddler属于上游，在fiddler里面对http进行的一些修改直接会影响到Charles里面的请求结果。

附：Charles（mac版本）一些常用操作的教程

1. Charles替换http的方法

1) 主菜单Tools——No Caching，开启no caching

2) 如下图。在主界面右键响应的请求，选择“Map Remote”（替换的请求为线上请求）或“Map Local”（替换的请求为本地文件）。以“Map Local”为例：

3) 在界面里选择本地文件，保存配置：

4) 刷新页面，查看是否替换成功

5) 管理被替换的http请求

主菜单Tools——Map Local，见下图。可添加新规则，或对已有的替换规则进行删除、使生效/不生效，也可以在这里全局开启/关闭替换规则。

6) 注意，暂时没发现Charles能直接把请求status code替换为404、500等的方法。但是可以用Map Remote替换地址为任意一个线上的404或500地址来间接模拟。

2. 模拟慢网速

主菜单Proxy——Throttle Settings，可选择内置的一些带宽设置或自定义设置，保存后可以点击主界面的

按钮开启/禁用慢网速功能。

3. 按照柱状图查看所有请求

主界面选择左侧的站点文件夹，在右边选择“Chart”视图查看所有请求。可按照“请求顺序”、“请求数据大小”、“耗时”、“MIME类型”分类进行查看、分析。