最为一个前端开发，对于浏览器的开发者工具的掌握是必不可少了；因为这个工具能够以可视化的方式展现当前网页情况，然后我们也能快速定位代码问题，如果我们能很好的利用起来，那就能写出高质量代码。
1.elements
特别提醒，对于有些比较精细的样式，我们直接在右边的style中调整，等调整好了之后，将样式拷贝到我们的代码中即可，这种方式既快捷又精准
2.console
1.我们在代码中打印的console.log()就可以在这里看到
2.这个控制台包含js运行环境，比如我们要验证一段js代码正确与否
3.source
主要是用来断点分析代码
解决bug的神器
4.network
接口报错的时候，在这里查看接口请求响应状态，好定位出是前端bug还是后端bug
5.Application
主要看几个数据存储
6.performance
这部分先熟悉一下，后面又专门的讲解这部分的视频
7.JS分析器
打开开发者工具按ctrl+shift+p搜索Show Javascript Profiler选中然后回车
可以清晰的看到某一行代码的执行时间，是不是很牛逼！！！
8.Rendering
这里几种情况可以演示一下！！！
Paint Flashing(绘画闪烁)：页面中需要重绘的区域会突显成绿色
Layer Shif Regions(层移位区域)：页面中需要重排的区域会突显成蓝色【直接使用element的tab删除元素】
3. Scrolling Performance Issues(滚动性能问题)：页面中减慢滚动速度的元素会突显成蓝绿色，包括触摸滚轮事件处理程序和其他主线程滚动情况【这种情况可能不好展示，】
4.Core Web Vitals(核心网络生命力)
LCP\color{green}{LCP}LCP (Largest Contentful Paint) 显示最大内容元素所需的时间，衡量网站的载入效率 FID\color{green}{FID}FID (First Input Delay) 首次输入延迟时间，衡量网站互动性 CLS\color{green}{CLS}CLS (Cumulative Layout Shift) 累计版面配置转移，衡量网页稳定性
【就是在页面加载过程中，页面的布局是不是一直在重排；这种情况，我们一般做法都是网站的静态布局是不变的，不会随着数据的获取来控制元素的展示与隐藏】
9.Css概览
搜索Show CSS Overview
可以查看网页中用了哪些颜色和字体，这个功能可以交会我们ui使用，让ui来检查我们的网页使用颜色和字体是否正确（哈哈哈，小机灵）
10.覆盖范围
搜索Coverage
可以查看我们代码有多少是没有使用到，可以做出优化
11.性能监视器
搜索Show Performance Monitor
可以看到：CPU使用情况、JS内存大小、DOM节点数等都可以实时监控。
12.FPS
FPS(Frames Per Second)，表示每秒传输帧数，是速度单位，是用来分析动画的一个主要性能指标。一般在50-60FPS的动画会相当流程，30FPS就会感觉卡顿了。
更多学习视频学习资料请参考：B站搜索“我们一起学前端”
