使用F12的一些基本排查技巧
使用F12的一些基本排查技巧
以google浏览器为例，F12，打开控制台
控制台介绍
1.元素（Elements）
页面布局，样式排查：与慕课进行对比（用于查看或修改HTML元素的属性、CSS属性、监听事件、断点）
2. 控制台（Console）
保持空白，Nomessages 无警告报错调试信息。（用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息）
3.源代码（Sources）
可以通过打断点调试问题（用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，调试JavaScript源代码，给JS代码添加断点等）
4.网络（Network）
使用最多。（用于查看header等与网络连接相关的信息）
XHR（请求），检查前端出传输的参数：allow_XHR（请求），检查传输的内容与需求是否一致，一种是浏览器正常请求，一种是错误的返回。如果是空白请求，则前后端没交互上
status_code：200,正常，浏览器正常请求 。5开头是后端问题，404前后都可能（访问接口不存在）。
以network为分界线，接口报文之前的都是前端问题，报文正常发送之后都是后端问题，可以把报文copy出来拿到postman中去发送尝试
preview：接口错误返回
response：failed 断网或服务器挂了
preserve log：保存日志，对比前后变化,无痕模式测试（不推荐，与正常模式还是有差别）
disable cache：一般要求勾选，可清除缓存
5. application
缓存存储位置，可清除缓存，打开控制台后在浏览器上的刷新按钮位置可清除缓存。
清除缓存的其他方式：Shift+F5或ctrl+shift+R（强制清空缓存，有些电脑不适用）、调出F12页面，刷新按钮右键进行清空缓存。
6. Performance
network: online/fast 3G/Slow 3G/offline——模拟网络不同情况
7. 检查问题出在前端还是后端
a. 前端传输参数与API文档一致（加强API文档的跟踪管理），检查后端返回数据是否正确。
b. 请求方式：大部分用的是post
c. 排查方法：点开要排查的接口，展示地址，字段，长度，API字段参数等。
Headers中需要关注的是General和Request
request payload——view parsed，切换显示参数
preview：为success 访问正常
d. 可切换屏幕分辨率进行检查，可使用手机模式，可设置不同的分辨率进行测试。
8. 调试方法
a. 如需要调试，需请前端开启调试功能，显示后缀信息以方便查找，然后对照API文档找到对应的接口信息
b. 在控制台输入showMe，查看调试时候的数据变量，加debugger断点调试；在控制台输入data，查看这个data的值等
9. ie浏览器
a. F12,默认开启控制台，基本不操作，对于网络及仿真使用较多
b. 文档模式和浏览器配置文件要保持一致，另模拟结果不准确
c. win7推荐装ie8，9，10，xp系统推荐装6，7，8，win10推荐ie10
d. 环境信息需要备注jira，尽量保持环境一致
e. 3d视图，win10系统中的edge浏览器具有该功能，缺点过慢
f. 页面加载出现过大的文件时就要和项目组建议是否需要压缩
10. 未登录上传附件操作方法：
F12，找到sessionid，删除后再上传附件
附：如有兴趣可查看：
https://www.bbsmax.com/A/q4zVb2kbzK/