Fiddler跟F12

一.移动端/小程序(H5)

目录

一.移动端/小程序(H5)

1.web端

2.移动端/小程序：

目录

一.移动端/小程序(H5)

1.web端

2.移动端/小程序：

二.F12跟Fiddler异同点

一.前提(fiddler)：

1.相同点

2.不同点

二.F12跟Fiddler异同点

1.相同点：

2.不同点：

三.F12跟Fiddler优缺点

三.移动端(Fiddler)

1.配置同一个局域网

2.手机连接方法

四.F12常用功能

五.Fiddler常用功能

1.请求格式

2.安装证书，能抓到https的请求

3.打断点，修改参数

3.访问N次

4.过滤请求（筛选）

---

二.F12跟Fiddler异同点

一.前提(fiddler)：

1.相同点

2.不同点

二.F12跟Fiddler异同点

1.相同点：

2.不同点：

三.F12跟Fiddler优缺点

三.移动端(Fiddler)

1.配置同一个局域网

2.手机连接方法

四.F12常用功能

五.Fiddler常用功能

1.请求格式

2.安装证书，能抓到https的请求

3.打断点，修改参数

3.访问N次

4.过滤请求（筛选）

---

<!--这也就是为什么有些强调H5页面的原因-->

1.web端

都是html的，常用的主流就是html5，都可以用浏览器打开

2.移动端/小程序：

一般H5或者原生

H5：能用web浏览器打开

原生：web浏览器打不开

二.F12跟Fiddler异同点

一.前提(fiddler)：

1.相同点

网页版：跟浏览器F12下网络里可以看接口、css、js信息是一样的

手机版：安装vconsole插件，js里引入也跟F12下一样。

2.不同点

如果手机端APP前端开发没有用插件，或是微信，小程序之类。就用到Fiddler了。

手机的话，跟FIddler所在的电脑连接同一个网络（无线）。见下【<1>.手机连接方法】

二.F12跟Fiddler异同点

1.相同点：

均可对HTTP请求进行分析

2.不同点：

（1）F12只能对Web进行抓包，Fiddler既可以对Web应用进行抓包，也可以对客户端及App进行抓包；

（2）F12无法篡改请求数据，而Fiddler可以；

（3）F12可以在Console中输入部分指令，方便查看前端数据，可通过Application方便查看一些请求数据，尤其涉及到登录或邀请相关的知识；

（4）Fiddler可以模拟弱网测试，而F12不可以；

（5）Fiddler可以模拟重定向（跳转URL），而F12不可以；

（6）Fiddler可以模拟其他IP访问（如境外IP地址等），而F12不可以；

（7）Fiddler可以模拟简单的接口测试，而F12不可以；----不好用，推荐postman

三.F12跟Fiddler优缺点

1.简单来说：

F12

优点：方便快捷

缺点：只能抓网页的包，且跳转url（重定向）看不到结果

Fiddler

优点：可以抓所有的http协议包，跳转url（重定向）可以看到结果，可以修改参数，可以请求多次

缺点：没有F12方便，需要配置

2.

三.移动端(Fiddler)

1.配置同一个局域网

保证手机跟电脑在同一个局域网

前提知识点：

台式机没有无线网卡，无法开热点，只能连接网线；笔记本可以插网线，也可以开热点

1.同一个wifi

2.台式机可以网线连接WIfi的路由器(插网线)，手机连接这个路由的wifi

（比如住的地方，公司的话台式机只能插无线网卡）

3.笔记本可以开一个热点，手机连这个热点

2.手机连接方法

1.打开无线局域网(平时连无线的地方)，wift标志的后面，点开

2.滑到最下面，【配置代理】，把【关闭】改成【手动】

服务器，是电脑的cmd里ipconfig 的IP，端口号是Fillder里配置的端口号。这样就可以了

二.修改参数--还没看

四.F12常用功能

元素（Elements）：用于查看或修改HTML元素的性情、CSS属性、监听事件、断点等；

控制台（Console）：记录前端Javascript对象、log信息、异常信息；

网络（Network）：与网络相关的接口请求响应和网络传输等；

源代码（Sources）：查看网页的源代码HTML代码、JS代码、CSS代码，可以直接修改代码进行前端测试；

性能（Performance）：监控该网页的性能各种指标信息；

内存（Memory）：记录页面跟随时间的内存使用情况；

存储（Application）：查看一些本地存储、会话存储、已索引数据库、Cookie、缓存等；

安全（Security）：调试当前网页的安全和认证等问题；

简单来说：

元素：页面元素查看与分析(web自动化)

控制台：查看日志，调试js

来源：网页加载后的源码

网络：网络和抓包

性能：网页性能分析

五.Fiddler常用功能

<!--截图粘贴进来，报错，见有道云笔记-->

1.请求格式

请求行

请求头

空一行

请求体

get请求可能没有请求体

2.安装证书，能抓到https的请求

3.打断点，修改参数

全局断点

就是中断fiddler捕获的所有请求，先设置下，点击rules-> automatic breakpoint ->before requests

1.能正常抓包的时候，设置下，设置完之后，下面的包就都是红色的带T的，左下角也是红色T的标志

2.页面或者app点击，触发你想拦截的包，抓到以后，双击，可以修改。

WebForms里修改可以看得清晰一点，修改完以后，点击绿色的Run to Completion就能提交了，于是就成功修改了请求参数了

（参数是1，返回1；参数是2返回2--------在这里抓到1改成2，返回的是2）

单个断点

已经知道了某个接口的请求地址，这时候只需要针对这一条请求打断点调试，在命令行中输入指令就可以了

1.接口命令行输入：bpu 接口地址 回车

2.取消断点，在命令行输入： bpu 回车就可以了

3.访问N次

4.过滤请求（筛选）

Fiddler