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 调试当前网页的安全和认证等问题

截屏2023-02-06 23.40.13.png

DevTool面板详解

Elements面板

developer.chrome.com/docs/devtoo…

截屏2023-02-07 23.44.51.png

Styles标签处理CSS，做到可见即所得，更改Styles标签的的样式可以实时看到页面的变化，点击css的具体位置会跳转到Sources面板。
Computed标签表示选中的元素盒子模型样式属性的具体计算值。
Event Listeners标签展示元素绑定的事件。
Properties标签表示元素具有的属性与方法，比直接查api会更方便。

Console面板

截屏2023-02-08 23.22.56.png

warn,error虽然对代码使用没有影响，但是可以让它们更语义化，提高对信息分类管理
console.assert() : 传入两个参数，只有当第一个参数为false时，才会打印出第二个参数所传入的字符串，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的
console.time(timerName)的参数timerName为新计时器的名字。用来标记这个计时器，作为参数调用 console.timeEnd()可以停止计时并将经过的时间在终端中打印出来。console.time()和console.timeEnd()这两个方法一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断。我们可以根据输出的时间判断是否符合我们的预期，是否需要对其做进一步优化，也可以判断是否是由于某一块代码执行时间太长，占用太长线程时间，导致我们页面卡顿等一系列问题。
console.dir() : 打印出传入的对象的所有属性与方法

Sources面板概览

对于bug调试，源码查看，历史老项目排错，同事项目排错等较为复杂的场景，断点调试更为直观高效。

断点调试操作

截屏2023-02-11 16.50.26.png

在Sources源代码面板找到需要断点的文件，点击对应的行数，就能实现断点。Sources面板右侧可以控制断点执行操作，操作按钮的作用从左至右依次为：结束当前断点并跳转到下一个断点、断点单步执行、单步跳入此执行块、单步跳出此执行块。这几个说明可能比较抽象，实际找一个项目试验一下，在实践中学习会有更深的理解和收获。
快捷键ctrl+p弹出文件搜索弹窗，直接输入文件名称就能实现查询。
截屏2023-02-11 16.55.40.png
快捷键ctrl+p弹出文件搜索弹窗，输入英文冒号:，继续输入想要跳转的行数，就是实现快速跳转到对应行。
截屏2023-02-11 16.56.30.png
我们此处看到的浮窗面板被Google称为Command Menu，除了快捷键操作之外，我们可以通过选择设置项中的Run command选项调出面板。
截屏2023-02-18 16.34.12.png

JS分析器

打开开发者工具按ctrl/command+shift+p搜索Show Javascript Profiler选中然后回车

图片来自掘金：juejin.cn/post/712618…
1ae77f75d2fc047e7908c3ad93096e52f~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?.png
可以看到当前js代码执行时间，也可以通过左上角录制，测试当前按钮执行的函数是否有性能问题：

156d656402d2b4ccca4b86bf52cb0a3cd~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?.png
然后我们点击右侧的html，点击事件执行时间和函数每一行执行的时间都展示出来

154ed1a5454e744a9bb647d71768003c0~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?.png

条件断点

对于行数右键点击，选择Add conditional breakpoint...或是在已有断点处选择Edit breakpoint...，输入对应的逻辑判断，此处可以使用的变量是当前行可以拿到的变量。只有符合条件逻辑的才会进入断点，这能解决有些断点会进入多次，但我们只需要符合特定逻辑的断点，这能提高效率。

1截屏2023-02-11 16.59.23.png

DOM断点

回到Element面板，我们找到想要设置断点的元素，最终会断点到触发dom操作的相应js上。

Subtree modifications（子树修改）：当当前选择的节点的子节点被移除或添加，或者子节点的内容被改变时触发。不会在子节点属性更改或对当前选定节点的任何更改时触发。

Attributes modifications（属性修改）：在当前选定的节点上添加或删除属性或属性值更改时触发。

Node Removal（节点移除） : 当当前选中的节点被移除时触发。

1截屏2023-02-11 20.16.59.png

Network面板

www.cnblogs.com/charliechu/…

Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。

1截屏2023-02-11 20.25.52.png

基本介绍

上述图片中记录了每次网络活动的主体模块被称为Network Log，其中每一行代表着一个资源，它们是按照时间顺序倒序排列的。每一列代表着对这个资源的信息描述：

Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
Status 标示HTTP状态码。
Type 标示请求的资源MIME类型。
Initiator 标记请求是由哪个对象或进程发起的，点击Initiator列会带我们前往产生此次资源请求对应的源码。
Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
Waterfall 是对该次请求不同阶段的图形化表述，点击该列可以查看更多细节。

以上展示的是Network Log的默认内容，我们可以右键标题行来展示更多的内容，例如展示一下该资源所对应的域名。

1截屏2023-02-18 16.49.20.png

捕获屏幕

Chrome提供了屏幕捕获的功能，我们勾选Capture screenshots的选项后重新加载页面，Chrome会为我们记录下loading过程中的页面是如何展现的，双击每一帧的截屏可以放大显示，单击则可以查看该帧被捕获时的网络请求信息，Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

1截屏2023-02-18 21.31.45.png

查看具体资源的详情

通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：

Headers 该资源的HTTP头信息。
Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。如果一个API返回了错误的信息，从这个Tab上看会比从HTML源码上看更容易发现问题，在查看图片资源时它也是更加方便的
Response 显示HTTP的Response信息。
Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

阻断请求

可以阻断请求URL和当前域名，可以搜索Show Network request blocking查看阻断的列表。

1c07b1b77a03f48c98a0423b2806dd5a3~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?.png

Performance面板详解

参考：

Performance面板是整个面板里面最复杂的一个面板，涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息，可以充分利用这个面板来分析你的网页的程序性能问题。

2截屏2023-02-11 20.34.18.png

概述

如上图所示，Performance面板从上至下分别为工具栏、概览、火焰图。

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 )	网络通信和HTML解析
黄色 ( Scripting )	JavaScript执行
紫色 ( Rendering )	样式计算和布局(重排)
绿色 ( Painting )	样式更改(重绘)
灰色 ( Other )	其他事件
白色 ( Idle )	空闲时间
红色 ( 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是根活动，嵌套表示调用堆栈。可以看到，实际计算出来的值还是会有一点误差。