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快捷,还需要配置 | 只能抓取网页的包 |