F12工具
本文章使用 Google Chrome 为例
相关文档：https://developer.chrome.com/docs/devtools?utm_source=devtools&hl=zh-cn
是浏览器自带的开发调试工具，因为可以使用F12快捷键启动，所以简称为F12工具
该工具作为浏览器的一部分，是数据收发的一端，抓取到的 HTTPS 报文是可以得到明文数据的
工具显示位置的调整
调整显示语言
找到F12工具的设置按钮，点击进入，调整的位置如下
切换移动端视图
Elements(元素)
可用于页面结构分析，也可用于自动化脚本的元素定位;或者页面元素分析(元素大小，元素布局等)。
Network(网络)
重点！，前端抓包等，分析、定位Bug
开启F12工具后，选中Network，打开百度页面。如下图所示
其中包含请求和响应的信息
如果网页跳转导致请求记录被刷新，如下图所示，勾选
如果不想在发起请求时使用缓存资源，则如下图所示勾选
请求过滤
文档：HTML等文档请求CSS：CSS文件JS：JS文件Fetch/XHR：暂时理解为HTTP请求，具体区别这里不是重点WS：WebSocket连接wasm：WebAssembly，二进制指令集
弱网测试
Recorder(记录器)
录制脚本，进行重放。用于在出bug的时候，可以进行回放，也可以导出，由别人导入后进行回放
注意
这是一个试用性功能
Application(应用)
用来查看本地保存的cookie，缓存等
本地存储和会话存储主要是前端开发人员在前端设置，一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
本地存储和会话存储的操作代码完全相同，它们的区别仅在于数据的寿命。
本地存储:保存不受时间限制，用于长期保存网站的数据；除非用户自己删除，否则不会消失；并且站内任何页面都可以访问该数据；主要用来保存访客将来还能看到的数据。
会话存储:用于临时保存针对一个窗口(或标签页)的数据，保存受时间限制，当前窗口一旦关闭，内容就会被浏览器删除。会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。
提示
比如页面上输入一些内容信息(注册信息)，中途被打断，页面关闭，然后重新打开，能保留上次输入的内容。
Console(控制台)
输出错误，调试JavaScript脚本
Performance(性能)
分析、定位性能问题
用途:监控该网页的性能各种指标信息场景:当我们在进行大并发的直播互动这种类似的场景下，对浏览器的负荷是比较大的，Performance对网页进行分析就可以评估实时网页性能以及相关的数据。（网页直播或者网页游戏会造成网页的负担较重，所以需要更加关注）
点击●可以开始录制，它会记录用户的交互以及这些交互对页面性能数据的影响,当交互完成后，点击 变成红色的●按钮 来停止 Record，Performance 面板会展示出刚才录制的页面性能数据
火焰图:显示性能报告，我们根据性能报告用来分析页面得性能，从而找到性能瓶颈
导出&导出火焰图:导入和导出脚本进行分析
FPS(帧率):主要和动画性能有关，代表每秒帧数。图表中的绿色长条越高，说明FPS越高，用户体验越好。如果其中有红色长条，代表着这部分帧数有卡顿，需要优化
NET:主要展示了网络请求的先后顺序以及各自的请求耗时，可以被 Network 面板完美替代，建议直接査看 Network
summary(摘要):cpu图表的各种颜色表示在这个时间段内，CPU在处理各种时间上面所花费的时间，如果你看到某段颜色占据了大量的比重，就说明这个地方可能存在优化的空间
Main(主要):主要用来分析页面性能的部分，它展现了主线程在 Record 过程中做的所有事情，包括:Loading、scripting、Rendering等:横轴代表着时间，纵轴代表着调用堆栈。每一个长条代表执行了一个事件或函数，长条的长度代表着耗时的长短。如果某个长条右上角是红色的则表示该函数存在性能问题，需要重点关注。
