F12抓包简单案例

F12抓包原理：在电脑访问互联网之前，进行包录制

1.谷歌开发者工具（F12）

元素（Elements）：页面元素查看分析，web自动化
控制台（Console）:查看日志
来源（Sources）：网络加载后的源码
网络（Network）：网络、抓包
性能（Performance）：网页性能

2.抓包

• 看接口加载情况
• BUG分析
• 调试代码

3.抓正确的包

• 清空包
• 触发抓包
• 停止抓包
• 需要勾选保留包日志，也可使用过滤
  
  F5：普通刷新，缓存
  ctrl + F5:强制刷新，不走缓存

4.读懂包

• 点击包，先看状态码，宏观查看包情况
• 再看参数，前端传参是否有问题
• 分析返回结果，看结果内容
  

5.bug分析定位

• 登录不成功判断是前端还是后台
  前端：请求没有成功，查看状态码，查看参数
  后台：有请求并响应，分析响应信息，可能后台处理有错
• 账号为Will，而will用户名也能登录分析bug
  前端传参→后台接收参数→数据库匹配用户名密码→匹配成功/失败→后台返回成功/失败→前端提示登录成功/失败
  前端传参（√）→后台返回就是登录成功（√）→检查数据库的数据，有没有will的账号，没有一样成功，是mysql数据没有区分大小写
  注意：BUG分析重要方法是从流程入手，结合抓包

6.Fiddler与F12比较

优缺点	Fiddler	F12
优点	抓所有HTTP的包，跳转url也可以抓	方便快捷
缺点	没F12快捷，还需要配置	只能抓取网页的包