使用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/