https://developer.chrome.com/docs/devtools/overview/
https://zhuanlan.zhihu.com/p/447103093
https://blog.csdn.net/weixin_39039962/article/details/78649542
Chrome DevTool概览
Chrome DevTools的存在是为了帮助开发人员调试、检查和优化web应用程序的性能和稳定性。它可以帮助网页开发者更好地调试他们的网站，检查网页的源代码，调整CSS布局，查看JavaScript的运行情况，以及使用其他工具和功能来管理网页性能。
Chrome的官方文档地址是Chrome DevTools，本文会以官方文档为基石讲解DevTools各个面板的使用并融入自己的思考。下图所示是Chrome Devtool的截图，其有着如下主要内容：
- Elements 主要显示当前页面的组织结构
- Console 控制台打印出来的信息警告或者错误
- Sources 主要用来做断点的调试
- Network用来显示获取通过HTTP请求从后台返回的资源所需要的时间（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化
- Performance 对网页进行性能的分析
- Memory 进行内存的分析
- Application 当前页面上的所有用到的资源信息包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
- Security 调试当前网页的安全和认证等问题
1.
DevTool面板详解
Elements面板
https://blog.csdn.net/weixin_39039962/article/details/78649542
https://developer.chrome.com/docs/devtools/overview/
- Styles标签处理CSS，做到可见即所得，更改Styles标签的的样式可以实时看到页面的变化，点击css的具体位置会跳转到Sources面板。
- Computed标签表示选中的元素盒子模型样式属性的具体计算值。
- Event Listeners标签展示元素绑定的事件。
- Properties标签表示元素具有的属性与方法，比直接查api会更方便。
Console面板
warn,error虽然对代码使用没有影响，但是可以让它们更语义化，提高对信息分类管理console.assert(): 传入两个参数，只有当第一个参数为false时，才会打印出第二个参数所传入的字符串，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的console.time(timerName)的参数timerName为新计时器的名字。用来标记这个计时器，作为参数调用console.timeEnd()可以停止计时并将经过的时间在终端中打印出来。console.time()和console.timeEnd()这两个方法一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断。我们可以根据输出的时间判断是否符合我们的预期，是否需要对其做进一步优化，也可以判断是否是由于某一块代码执行时间太长，占用太长线程时间，导致我们页面卡顿等一系列问题。console.dir(): 打印出传入的对象的所有属性与方法
$0
https://juejin.cn/post/7126188054821208100
1 | $1`对上次的节点引用，`$2`对上上次节点的引用，一直到`$4 |
$_
$、$$
等同于
document.querySelector和document.querySelectorAll
Sources面板概览
https://juejin.cn/post/7145256569041584142
对于bug调试，源码查看，历史老项目排错，同事项目排错等较为复杂的场景，断点调试更为直观高效。
断点调试操作
在Sources源代码面板找到需要断点的文件，点击对应的行数，就能实现断点。Sources面板右侧可以控制断点执行操作，操作按钮的作用从左至右依次为：结束当前断点并跳转到下一个断点、断点单步执行、单步跳入此执行块、单步跳出此执行块。这几个说明可能比较抽象，实际找一个项目试验一下，在实践中学习会有更深的理解和收获。
快捷键ctrl+p弹出文件搜索弹窗，直接输入文件名称就能实现查询。
快捷键ctrl+p弹出文件搜索弹窗，输入英文冒号:，继续输入想要跳转的行数，就是实现快速跳转到对应行。
我们此处看到的浮窗面板被Google称为Command Menu，除了快捷键操作之外，我们可以通过选择设置项中的Run command选项调出面板
JS分析器
打开开发者工具按
ctrl/command+shift+p搜索Show Javascript Profiler选中然后回车
可以看到当前js代码执行时间，也可以通过左上角录制，测试当前按钮执行的函数是否有性能问题：
然后我们点击右侧的html
点击事件执行时间和函数每一行执行的时间都给你展示出来
条件断点
对于行数右键点击，选择Add conditional breakpoint...或是在已有断点处选择Edit breakpoint...，输入对应的逻辑判断，此处可以使用的变量是当前行可以拿到的变量。只有符合条件逻辑的才会进入断点，这能解决有些断点会进入多次，但我们只需要符合特定逻辑的断点，这能提高效率。
DOM断点
回到Element面板，我们找到想要设置断点的元素，最终会断点到触发dom操作的相应js上。
Subtree modifications（子树修改）：当当前选择的节点的子节点被移除或添加，或者子节点的内容被改变时触发。不会在子节点属性更改或对当前选定节点的任何更改时触发。
Attributes modifications（属性修改）：在当前选定的节点上添加或删除属性或属性值更改时触发。
Node Removal（节点移除） : 当当前选中的节点被移除时触发。
Network面板
https://www.cnblogs.com/charliechu/p/5981346.html
Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。
基本介绍
上述图片中记录了每次网络活动的主体模块被称为Network Log，其中每一行代表着一个资源，它们是按照时间顺序倒序排列的。每一列代表着对这个资源的信息描述：
- Name 资源名称，点击名称可以查看资源的详情情况，包括
Headers、Preview、Response、Cookies、Timing。 - Status 标示HTTP状态码。
- Type 标示请求的资源MIME类型。
- Initiator 标记请求是由哪个对象或进程发起的，点击Initiator列会带我们前往产生此次资源请求对应的源码。
- Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
- Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
- Waterfall 是对该次请求不同阶段的图形化表述，点击该列可以查看更多细节。
以上展示的是Network Log的默认内容，我们可以右键标题行来展示更多的内容，例如展示一下该资源所对应的域名。
捕获屏幕
Chrome提供了屏幕捕获的功能，我们勾选Capture screenshots的选项后重新加载页面，Chrome会为我们记录下loading过程中的页面是如何展现的，双击每一帧的截屏可以放大显示，单击则可以查看该帧被捕获时的网络请求信息，Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点
查看具体资源的详情
通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：
- Headers 该资源的HTTP头信息。
- Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。如果一个API返回了错误的信息，从这个Tab上看会比从HTML源码上看更容易发现问题，在查看图片资源时它也是更加方便的
- Response 显示HTTP的Response信息。
- Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
- Timing 显示资源在整个请求生命周期过程中各部分花费的时间。
阻断请求
可以阻断请求URL和当前域名
可以搜索Show Network request blocking查看阻断的列表
Performance面板详解
https://juejin.cn/post/7126188054821208100
https://www.cnblogs.com/charliechu/p/5992177.html
Performance面板是整个面板里面最复杂的一个面板，涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息，可以充分利用这个面板来分析你的网页的程序性能问题。
概述
如上图所示，Performance面板从上至下分别为工具栏、概览、火焰图
1.
2.
3.
Controls 工具栏
Controls 录制开关和控制录制过程中需要记录哪些信息。
Performance面板的工具栏从左到右依次为：
Record(Ctrl+E) 记录运行时性能
Start profiling and reload page(Ctrl+Shift+E) 记录负载性能，会重新加载页面
clear 清空面板
Load profile… 上传
Save profile… 下载，会生成个json文件，需要做比对可以再上传
recordings 生成过的profile列表记录，注意：点clear就全没有了
Screenshots 屏幕截图，启用会在录制时捕获每一帧的屏幕截图
Memory 内存 下面也会有重点介绍
Web Vitals 核心功能，会显示LCP，FCP，LongTasks
Collect garbage 录制时强制垃圾收集
Overview 概览
Overview 网页性能的概要信息。其中第2块Overview显示了网页性能相关的概要信息，可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围，Flame Chart会跟着局部放大显示指定区域内的详情信息。
在概览上可以拖动鼠标进行缩放，可以点击定位，可以鼠标滚轮放大缩小。
这个窗格包含了三个图表：
1.FPS 每秒帧数(Frames Per Second)。绿色柱状条越高，则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。
2.CPU 标记CPU资源的使用情况，这里的面积图标记着消耗CPU资源的各类事件。
3.NET 各种颜色的柱状条分别显示一种资源。柱状条越长，代表获取这个资源的时间越长。
CPU面积图中各颜色的含义：蓝色代表HTML文件；黄色代表脚本文件；紫色代表样式文件；绿色代表媒体文件；灰色代表其它杂项文件。
以颜色进行划分
| 颜色 | 执行内容 |
|---|---|
| 蓝色 ( Loading\color{blue}{Loading}Loading ) | 网络通信和HTML解析 |
| 黄色 ( Scripting\color{yellow}{Scripting}Scripting ) | JavaScript执行 |
| 紫色( Rendering\color{purple}{Rendering}Rendering ) | 样式计算和布局(重排) |
| 绿色 ( Painting\color{green}{Painting}Painting ) | 样式更改(重绘) |
| 灰色 ( Other\color{gray}{Other}Other ) | 其他事件 |
| 白色 ( Idle\color{white}{Idle}Idle ) | 空闲时间 |
| 红色 ( LongTasks\color{red}{Long Tasks}LongTasks ) | 长任务出现 |
Flame Chart 火焰图
Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
点击火焰图任何区域，可以使用键盘的WASD进行缩放和左右位移
Frames-帧
- 白色：没有变化
- 绿色：按预期及时渲染
- 黄色：浏览器尽最大努力及时呈现至少一些视觉更新，比如滚动了但主线程没空
- 红色：掉帧，无法在合理的时间内渲染帧，比如：
scroll，resize事件触发过于频繁,浏览器来不及处理导致在下一个事件被触发之前无法完成
Main-主线程
Ctrl + F可以搜索Task名字，定位到具体的位置会标红
右上角有红色三角形表示该Task是一个长任务(执行超过50ms)，左边灰色区域执行时间50ms，右边红色区域执行时间就是39.83ms。长任务过多会导致页面出现卡顿，那我下篇性能优化文章会讲解如何去优化长任务。
从上倒下依次是调用堆栈，上面的事件导致下面的事件。
Details 更多信息
Details 当选择一个指定的事件后，会显示这个事件的更多信息；当没有选择事件时，会显示指定的时间帧信息。
Call Tree 调用树
调用树的顺序是从上到下，和Buttom-Up顺序相反，这里介绍一个就可以了
SelfTime指的当前函数执行时间，不包括子函数执行时间，百分比是当前时间除以所有SelfTime时间之和。
TotalTime指的SelfTime和子函数的TotalTime之和，百分比是当前时间除以首个函数的TotalTime。
Activity列中的顶级项目，例如Event、Paint和Composite Layers是根活动，嵌套表示调用堆栈。 可以看到，实际计算出来的值还是会有一点误差。
Event Log 事件日志
按记录期间发生的顺序查看活动，包括加载、脚本、渲染、绘制等，也提供了事件名和耗时时长搜索过滤。
Start Time表示该活动开始的时间点，相对于记录的开始时间。比如103.6ms，表示活动在录制开始后103.6毫秒开始。
网页录制详情
录制中进行JS分析
录制中捕获截屏
绘制解析
查询指定事件
运行时性能分析
Memory面板
Statistics统计视图
堆快照的总的分布统计情况
Containment视图
到当前内存占用情况，可以探测堆的具体内容，它提供了一个更适合的视图来查看对象结构，有助于分析对象的引用情况，使用它可以分析闭包和进行更深层次的对象分析。
该视图本质上是应用程序的对象结构的“鸟瞰图”，允许深入分析函数的闭包，了解应用程序底层的内存使用情况。
这个视图提供了多个入口：
1.DOMWindow objects DOMWindow对象，即JS代码全局对象。
2.Native objects 浏览器原生对象，比如DOM节点，CSS规则。
Summary视图
按照构造函数进行分组，用它可以捕获对象和它们使用的内存情况，对于跟踪定位DOM节点的内存泄漏特别有用。
测试内存泄漏
1.测试当前内存
点击
Heap snapshot，再点击左上角圆圈，获取当前快照 可以看到当前内存占用情况
2.测试内存泄漏
点击Allocation instrumentation on timeline，再点击左上角圆圈，开始记录内存情况
可以看到内存泄露了，点击
(array)进去能看到具体哪个变量造成的内存泄露。
3.performance查看内存泄露
切到performance也能测内存泄露，我们需要在下方勾选Menory，再去录制即可。 可以看到内存一直在增加，没有平稳成一条直线就说明有泄露了。
FPS
简介：FPS(Frames Per Second)，表示每秒传输帧数，是速度单位，是用来分析动画的一个主要性能指标。一般在50-60FPS的动画会相当流程，30FPS就会感觉卡顿了。
当然，performance也能查看FPS，红色表示长时间帧，可能出现卡顿掉帧。
Application面板
https://www.cnblogs.com/charliechu/p/6021141.html
1.Local Storage:如果在开发过程中使用了local storage来存储键值对(KVPs)，那么可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
2.Application cache:可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
3.Frames:将页面上的资源按frame类别进行组织显示。
Frames窗格可以查看到顶级的top是一个主文档，在top下面是主文档的Fonts、Images、Scripts、Stylesheets等资源。最后一个就是主文件自身。
在资源上右击后在弹出菜单选择Reveal in Network Panel，就会跳转到Network面板并定位到该资源的位置。
Security面板
可以在这里调试当前网页的安全和认证等问题并确保已经在你的网站上正确地实现https。
https是以安全为目标的http通道，简单讲是http的安全版。
即http下加入SSL层，https的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系）句法类同http:体系，用于安全的http数据传输。
https:URL表明它使用了http，但https存在不同于http的默认端口及一个加密/身份验证层（在http与TCP之间）。
参考
https://juejin.cn/post/7126188054821208100
https://zhuanlan.zhihu.com/p/463073218