F12工具使用

一、网页F12工具基本介绍

是浏览器自带的一个开发调试工具，因为可以用F12快捷键直接启动；
F12 作为浏览器的一部分，是数据收发的一端，抓取到的 HTTPs 报文分析排查故障。

1.1、启动F12

键盘按F12；
网页右击点击“检查”；
ctrl+shift+i 快捷键启动

1.2、F12快捷设置

可以选择停靠的位置；
可以选择语言；
可以切换手机模式；

二、element/查看器/元素

• 查看代码；
• 查看元素属性；
• 页面元素分析，可以选择箭头，定位页面；
• 查看和编辑网页的 HTML 结构 和 CSS 样式；

三、Network/网络

3.1、Network用途

• 记录所有网络请求（HTML、CSS、JS、API 等）；
• 这个部分记录了前后端的交互；
• http请求消息：请求行（请求方法）、请求头、请求体 --客户端发送
• http响应消息：响应行（响应状态码），响应头，响应体 --服务器回应

3.2、Networ所包含的各元素的用途

• 抓到的报文分析：
• 状态：http的响应状态码：200 404 500 503 304 （重定向）
• 方法：http请求方法 - get post put patch
• 域名：服务器的域名或者IP+端口
• 文件和类型（启动器）：html、css js png
• 发起者：请求怎么发起的，比如script：页面是由script脚本处理的时候发送的；
• 传输和大小：传输的文件及大小

详细报文内容：消息头，cookies，请求，响应，耗时

3.3、请求过滤

Fetch/xhr：
网站开发普遍采用前后端分离的模式，数据交互成为了不可或缺的关键环节。在这个过程中，XHR 和 Fetch API 是两种最常见的方法，用于从 Web 服务器获取数据。XHR 是一种传统的数据请求方式，而 Fetch API 则代表了现代 Web 开发的新兴标准。
XHR

• 基于事件的回调模型（如 onreadystatechange）。

• 需要手动处理错误和超时。

• 代码较为复杂，尤其是处理异步流程时。
Fetch

• 基于 Promise 的现代语法，支持链式操作；

• 更易于读取和维护；

• 默认不抛出网络请求的错误（例如 HTTP 404 被认为是成功响应）。

WS：
全称 WebSocket，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

四、Application/应用面板

应用面板主要包含网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

4.1、本地存储和会话存储

前端开发人员的前端设置，一旦数据保存到本地以后，就可以避免在向服务器请求数据，因此减少不必要的请求，减少数据在浏览器和服务器之间的传输。提高浏览器的访问速度。

4.2、Cookie

下载到计算机上的小文件，比如访问过的链接，单击的按钮，登录信息机过去访问的页面。

五、Console/控制台

查看前端页面的报错。
通过JS代码或者命令行console.log()、console.warn() 和console.error()可以将日志信息输出到控制台

• console.log 显示一般的基本日志信息，当要显示的基本日志太多时可以使用console.group将相关的日志进行分组
• console.warn 显示带有黄色小图标的警告信息
• console.error 显示带有红色小图标的红色的错误信息

六、Performance/性能测试

监控网页的各种性能。

参考文档如下：

https://www.cnblogs.com/simpleness/p/17624412.html
https://www.bilibili.com/video/BV1LY4y1d73P?spm_id_from=333.788.player.switch&vd_source=a152087dca674715707126502292f55b&p=7