Chrome F12开发者工具
元素
调试dom结构，调试css样式。 图最右与二级tab计算样式是同一个，在生效的同一个样式比较多时，可以在这个功能里检验最终的样式
强制设置状态，调试交互状态的样式，常用hover(鼠标悬停),focus(输入框焦点)
源代码/来源
基础信息与设置
设置source-map,调试原代码而非打包后的代码
javascript
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}通过植入debugger或者使用编辑器调试功能：点击代码行左侧空白处调试该行代码（webStorm、VScode都有）
还可以直接在f12里找到该行代码点击代码行数来调试
在作用域tab查看断点位置的所有变量和对象
在调用堆栈查看函数调用的顺序
调试操作
- Resume 恢复脚本执行
- Step over 跳过下一个函数
- Step into 进入下一个函数
- Step out 跳出当前函数
- Step 下一步
- 关闭断点功能
报错时断点（万恶的undefined！）
代码报错时，我们希望知道报错那瞬间的上下文。
此时我们可以开启这个功能，在报错且没有被捕获时，浏览器会给你打一个断点，然后你可以看看哪个变量出了问题。
还可以勾选这个 Pause on caught exceptions，效果是错误被捕获时，打断点：
新版本设置
console.log OR debugger?
复杂代码：debugger > console.log
生产问题：埋1个debugger > n个console.log
简单代码日常调试业务：console.log > debugger
注意一下console.log的屎山问题，及时删掉调试代码
网络
常用功能：
不常用但有用：
屏蔽请求网址、重放XHR 
请求详细信息
检查header、传参是否有问题，检查返回内容查看数据结构 
应用
手动修改LocalStorage、SessionStorage和Cookie
Lighthouse
Lighthouse会生成一个报告，会给你的页面跑出一个分数来。 分别是页面性能（performance）、Progressive（渐进式 Web 应用）、Accessibility（可访问性）、Best Practices（最佳实践）、SEO 五项指标的跑分。甚至针对我们的性能问题给出了可行的建议、以及每一项优化操作预期会帮我们节省的时间。这份报告的可操作性是很强的------我们只需要对着 LightHouse 给出的建议，一条一条地去尝试，就可以看到自己的页面，在一秒一秒地变快。
常见的问题
Remove unused JavaScript（移除无用的js）
对于后台项目一般ui框架的全局引入就是比较明显的问题，把全局引入改为按需引入就可以解决。
还可以使用覆盖率功能检查无用代码的具体情况(红色代表未使用)
Minify CSS /Minify JavaScript（最小化CSS/JavaScript）
开启压缩
Use HTTP/2
简单易懂
Serve static assets with an efficient cache policy（为静态资源提供缓存）
开启静态资源缓存
web性能优化（Lighthouse和performance）：从实际项目入手，如何监测性能问题、如何解决。
性能/performance
1. Performance指标值
| 名词 | 解析 | 详细 |
|---|---|---|
| FP (First Paint) | 首次绘制 | 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点 |
| FCP (First Contentful Paint) | 首次内容绘制 | 标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、非空白canvas或SVG 甚至 元素. |
| LCP (Largest Contentful Paint) | 最大内容渲染 | 代表在viewport中最大的页面元素加载的时间. LCP的数据会通过PerformanceEntry对象记录, 每次出现更大的内容渲染, 则会产生一个新的PerformanceEntry对象. |
| DCL (Dom Content loaded) | 当 HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载 | |
| FMP(First Meaningful Paint) | 首次有效绘制 | |
| L (onLoad) | 加载完成 | 当依赖的资源, 全部加载完毕之后才会触发. |
| TTI (Time to Interactive) | 可交互时间 | 指标用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点. |
| TBT (Total Blocking Time) | 页面阻塞总时长 | TBT汇总所有加载过程中阻塞用户操作的时长，在FCP和TTI之间任何long task中阻塞部分都会被汇总 |
| FID (First Input Delay) | 首次输入延迟 | 指标衡量的是从用户首次与您的网站进行交互（即当他们单击链接，点击按钮等）到浏览器实际能够访问之间的时间 |
| CLS (Cumulative Layout Shift) | 累积布局偏 | 总结起来就是一个元素初始时和其hidden之间的任何时间如果元素偏移了, 则会被计算进去。具体的计算方法可看这篇文章 《Cumulative Layout Shift (CLS)》 |
| SI (Speed Index) | 指标用于显示页面可见部分的显示速度, 单位是时间 |
2. RAIL 性能模型
| 名词 | 解析 | 详细 |
|---|---|---|
| response | 响应 | 用户输入之后是否能在100ms之内响应 这里的输入包括点击按钮、切换表单控件等，但不包括触摸滑动或滚动（50ms内完成较好） |
| animation | 动画 | 最近手机圈很流行将屏幕刷新率提升为90hz，这里hz就是帧率，90hz就是每秒有90帧，一帧就是一个画面。每秒看到的画面越多，我们就会感到越流畅，（每10ms内产生一帧较好） |
| idle | 浏览器空置状态 | 利用空闲的时间完成一些推迟的工作。推迟的工作应分为50ms的多个块进行。（尽可能增加空闲时间） |
| load | 加载 | 5s加载完成并且可以交互 |
3.Performancem面板参数
【第3以下配置都是用来模拟手机、慢网络下使用的】
| 名词 | 解析 |
|---|---|
| no recordings | 就是每一次的检测报告，可以根据每一次的检测报告，去进行性能优化的对比 |
| Screenshots | 是用来查看在每个时间段界面的变化 |
| Memory | 存储调用栈的大小，在不同时间段的不同大小； |
| Disable Javascript samples | 禁用 javascript 调用栈,关闭javaScript样本减少在手机运行时的开销，模拟手机运行时勾选 |
| Enable advanced paint instrumentation (slow) | 记录渲染事件的细节,选择frames中的一块，可以看到区域四多了个Layers |
| Network | 网络模拟,可以模拟在3G,4G等网络条件下运行页面； |
| CPU | 用来查看电脑的性能问题,主要为了模拟底CPU下运行性能 |
| HEAP | JavaScrip 执行的时间分布。 |
| 区域2：网页性能总览图（overview） |
| 名词 | 解析 |
|---|---|
| FPS | 每秒帧数，是用来分析动画的一个主要性能指标，对于动画而言标准是保持在60FPS。绿色越高越好，出现红色则表示FPS低（这就是你为啥觉得页面卡顿了），你可以在区域三Frames中看到具体的FPS值（见下面第二图） |
| CPU | 处理各个任务花费的时间，选择一段CPU统计可以在区域四的Summary看到统计表格 Scripting 脚本 Rendering 渲染 Painting 绘制 Loading 加载 ldle 闲置 |
| NET | 每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。 |
| 区域3：线程面板 | |
| 名词 | 解析 |
| Frames | 帧线程，鼠标悬浮绿色块可以看到fps |
| Main | 主线程，负责执行Javascript, 解析HTML/CSS, 完成绘制。 可以看到主线程调用栈和耗时情况，每个长条都是一个事件，悬浮可以看到耗时和事件名 x轴指时间： 最上面的第一条就是事件触发的地方，直到结束，这条线是最长的 y轴指调用栈：上面的event调用了下面的子event，越到下面数量越少（瀑布） |
| Raster | Raster线程，负责完成某个layer或者某些块(tile)的绘制。光栅化线程池，用来让 GPU执行光栅化的任务 |
| Interactions | 用来记录用户交互操作，比如点击鼠标、输入文字、动画等 |
| Timings | 用来记录一些关键的时间节点在何时产生的数据信息，诸如 FP、FCP、LCP 等 |
| Compositor | 合成线程的执行记录，用来记录html绘制阶段 (Paint)结束后的图层合成操作 |
4.统计面板
| 名词 | 解析 |
|---|---|
| Summary | 统计图：展示各个事件阶段耗费的时间 |
| Bottom-Up | 排序：可以看到各个事件消耗时间排序 (1)self-time 指除去子事件这个事件本身消耗的时间 (2)total-time 这个事件从开始到结束消耗的时间（包含子事件） |
| Call Tree | 调用栈：Main选择一个事件，表示事件调用顺序列表（从最顶层到最底层，而不是只有当前事件） |
| Event Log | 事件日志 (1) 多了个start time，指事件在多少毫秒开始触发的 (2) 右边有事件描述信息 |
5.例子
图层
transform可以改善动画的流畅性，过度使用transform会导致图层过多导致页面性能下降
网页整页截图
在F12里 按 Ctrl + Shift + P (mac Command + Shift + P)调出命令行输入"截图"