超实用的Chrome DevTools调试技巧，大大提高写bug效率

Chrome DevTools 提供了很多实用功能来调试源代码、捕获元素状态、更新和测试元素属性、模拟各种设备环境等。今天就来学习几个超实用的调试技巧！

1、选择和检查 DOM 元素

在 Chrome DevTools 的 Console 面板中，可以输入一些带 $ 的命令来选择和检查 DOM 元素。

$0 - $4 命令可以用来显示在 Elements 面板中检查的最后五个 DOM 元素，$0 返回最近一次选择的元素，$1 返回最近一次之前选择的元素，以此类推。

$(selector) 返回带有指定的 CSS 选择器的第一个 DOM 元素的引用。这个命令就等同于 document.querySelector() 函数：

$$(selector) 返回与给定 CSS 选择器匹配的元素数组。这个命令等同于 document.querySelectorAll() 函数：

2、复制数据

在日常开发中，我们会使用 Chrome DevTools 来调试页面，比如修改页面的样式、节点属性等。其为我们提供了复制数据的功能，可以将修改后的内容复制到源代码中。

复制 CSS 样式：

我们可以复制 CSS 规则或声明，甚至可以将内容复制为 JavaScript 键值对：

// Copy rule
element.style {
max-height: 90%;
max-width: 90%;
}
// Copy all decalarations as js
maxHeight: '90%',
maxWidth: '90%'
// Copy property
max-height
// Copy value
90%

复制 HTML 内容，右键点击要复制的元素 -> Copy，点击要复制的内容类型即可：

复制请求数据：

3、发送 XHR 请求

Chrome DevTools 支持重新发送 XHR 请求。在和后端进行接口联调时，如果想要重新发送请求，并且参数保持不变，可以直接右键点击要重新发送的 XHR 请求，点击 Replay XHR 即可重新发送该请求：

对于一个请求，有时需要修改请求参数并重新发送，可以直接在控制台发送请求。只需要先右键点击需要重新发送的 XHR 请求，选择 Copy -> Copy as fetch：

在 Console 面板中粘贴已经复制的请求内容，修改所需参数，按下回车发送请求即可：

4、颜色选择器

Chrome DevTools 提供了一个颜色选择器来设置背景颜色和文本颜色。颜色选择器具有各种功能：颜色选择器具有各种功能，例如

色调控制。
使用吸管从页面元素中选择颜色。
切换调色板。
可以在当前颜色的 RGBA、HSLA 和十六进制表示之间切换。
不透明度控制。

只需在元素样式的颜色显示块上点击即可弹出颜色选择器：

可以使用吸管从页面上直接吸取颜色：

5、监听事件

可以在 Chrome Devtools 的 Console 面板中输入 monitorEvents() 来监听指定目标事件的信息。该方法有两个参数，第一个参数是要监听的对象。如果未提供第二个参数，所有事件都会返回。要指定要监听的事件，传递一个字符串或字符串数组作为第二个参数。

例如，监听页面 body 上的点击事件：

可以调用 unmonitorEvents() 方法来停止监听事件，需要传递一个停止监视对象的参数。例如，停止监听 body 对象上的事件：

6、检查未使用的 CSS

可以在 Coverage 面板中检查页面中没有使用的 CSS 和 JavaScript 代码，可以通过以下步骤来打开 Coverage 面板：

点击刷新按钮开始重新加载页面，以测试页面的代码覆盖率：

检查页面的资源使用情况，点击可以查看哪些代码是没有使用的，可以通过删除那些未使用的代码来最小化 CSS 文件的大小：

对于测试结果，可以进行筛选、过滤、下载等操作。

7、引用 HTML 元素

在 Chrome DevTools 的 Elements 面板中右键点击要引用的 HTML 元素，选择 Store as global variable 即可将其保存为一个变量，其变量名会在 Console 面板中打印出来：

8、日志点

Logpoints （日志点）是一种向控制台提供调试信息的方式，而无需使用 console.log()，这在线上应用调试时会很有用。可以通过右键单击 DevTools 中的 Source 选项卡中的任何行并指定要记录的表达式来添加新的 Logpoint。执行该行时，就会在控制台中获得它的值。

使用该功能可以减少调试代码，提高代码的整洁性。并且，线上应用也可以直接添加控制台输出。

9、动态表达式

实时表达式是一种在表达式更改时显示其值的功能。这有助于追踪代价高昂的表达式（如动画中使用的表达式）或变化很大的表达式（例如，如果正在遍历数组）的问题。它会将 Console 面板里的表达式置顶，并且能随着用户点击的变化，而动态刷新该置顶的表达式。

只需点击下图中眼睛图标，输入一个想要置顶的 JavaScript 表达式即可：

10、调试动画

Chrome DevTools 提供了检查和修改动画的功能。它可以帮助我们播放动画、修改动画时间并分析特定时间范围内的视图。

只需在 More tools -> Animations中打开动画面板进行调试即可：

Animation Inspector (动画检查器）分为四个主要部分：

Controls (控件) ：从此处可以清除所有当前捕获的动画组，或更改当前选定动画组的速度。
Overview (概述) ：在此处选择一个动画组以在详细窗格中检查和修改它。
Timeline (时间轴) ：暂停并从此处开始播放动画，或跳到动画中的特定点。
Details (详细) ：检查并修改当前选定的动画组。

前端开发工具DevTools的详细知识点总结（三）之js调试_devtools.js-CSDN博客

超实用的Chrome DevTools调试技巧，大大提高写bug效率_devtools js 调试-CSDN博客

chrome浏览器network控制台使用和功能介绍_chrome network-CSDN博客

chrome浏览器network的控制面板主要分为7大板块
1、功能区
2、筛选区(功能区漏斗需要开启)
3、快照区(功能区需要打开屏幕捕获)
4、时间轴区(功能区需要开启overview)
5、主显示区
6、信息汇总区

一、功能区

1、红色圆点代表是否开启 network 的日志功能,如果灰色的,就代表未开启,红色的代表已开启.2.

2、清除 network 日志

3、摄像机是捕获屏幕,默认是关闭状态,点击后图标变成蓝色,会记录页面在不同时间下的快照,此按钮开启才会显示3快照区

4、漏斗代表是否开启过滤选项,此按钮开启会才会显示2筛选区

5、放大镜代表快速查找按钮,可以迅速查到当前页面包含**东西,

6、代表是否使用更大的区域显示请求记录,我喜欢大的显示,一般可以开启

7、代表是否显示overview概括,此按钮开启才会显示5时间轴

8、重要:Preserve log,是否保留日志,如果勾上,页面刷新后,日志也不会消失(这功能很有用,比如页面跳转后,你想看页面跳转前发出的请求有哪些,比如查看别人网站登录请求,登录成功返回什么,登录成功后又发起了些什么请求,重定向到什么地址)作用:

(1)我们可以看到一些中间页的跳转，省去了抓包的麻烦。

(2)可以和上个页面的数据比对。

10、Disable cache,缓存开关,开启这个功能，浏览器关于当前网站的js、css、图片…等缓存都会失效，所有请求都会重新发送给服务器。ctrl+F5也可以达到同样的效果。当我们打开 disable cache 之后，我们就不需要关了，每次都是无缓存的加载.

11、Offline 是网络连接开关,比如说在测试 PWA。或者说弱网的情况下的一种快速配置。

12、Online这个下拉列表是网速阀值,可以设置上传下载最大网速等.一般可以网页在不同网络状态下的显示效果

二、筛选区

1.作用:请求比较多的页面，我们有可能需要过滤。

2.功能:工具栏提供了，路径过滤（支持正则），类型过滤（All,XHR,js,图片等）,方便快速查看,按住CTRL可多选

3.Hide data URLs的作用:网站开发者很多时候会将一些小的图片或者 CSS 脚本，以 BASE64 格式嵌入到 HTML 中，以减少 HTTP 请求数。当勾选了 Hide data URLs 选项后，就可以隐藏掉请求列表中的像 data: 或者 blob: 类请求。

4.filter查找框

除了以上几个 Chrome 提供的过滤器以外，还可以非常灵活的在过滤框中使用过滤属性进行请求日志的筛选。

可以进行模糊搜索(只搜索url地址),如果首尾加上/,则表示使用正则匹配(同时搜索 URL 地址和返回内容)旧版本 chrome 可能会在过滤输入框右边有个 regexp 选项,勾选了正则才会生效

常见的filter过滤属性可参考：

domain：筛选出指定域名的请求，不仅支持自动补全，还支持*匹配。

has-response-header：筛选出包含指定响应头的请求。

is：通过is:running找出WebSocket请求。

larger-than：筛选出请求大于指定字节大小的请求，其中1000表示1k。

method：筛选出指定HTTP方法的请求，比如GET请求、POST请求等。

mime-type：筛选出指定文件类型的请求。

mixed-content：筛选出混合内容的请求（不懂啥意思）。

scheme：筛选出指定协议的请求，比如scheme:http、scheme:https。

set-cookie-domain：筛选出指定cookie域名属性的包含Set-Cookie的请求。

set-cookie-name：筛选出指定cookie名称属性的包含Set-Cookie的请求。

set-cookie-value：筛选出指定cookie值属性的包含Set-Cookie的请求。

status-code：筛选出指定HTTP状态码的请求。

(1)filter使用方法1:我们想筛选网页中来自于不同域名的请求资源，就可以在过滤框中输入 [domain:] ，Chrome 会帮我们自动补齐相关的域名信息。

(2)打开的网页中，如何查看哪些请求使用了缓存？使用命令 [is:from-cache],对应的还有[is:runing]

三、快照区和四、时间轴区

这两个区域主要对网页整理的加载情况进行一个分解性的展示

快照区可以更直观的看到浏览器打开网页的流程,和打开整个网页所用时间

而时间轴区可以滑动鼠标滚轮看查看不懂时间加载文件的情况,对找出网页中加载慢的文件还是很有帮助的

五、主显示区

1.主显示区包含了 name(姓名),status(状态),Type(类型),Initiator(发起者),Size(大小),Time(时间),Waterfall(瀑布分析)

Name：请求资源的名称

Status HTTP：状态码

Type：请求资源的 MIME 类型

Initiator：发起请求的对象或进程

Size：服务器返回的响应大小（包括头体和包体），可显示解压后大小

Time：总持续时间，从请求的开始到接收响应中的最后一个字节

Waterfall：各请求相关活动的直观分析图

2.请求列表默认是按照资源请求发起的时间升序排列的，我们也可以选择按指定列排序,点击相关列表头即可

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

Headers 该资源的HTTP头信息。

Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。

Response 显示HTTP的Response信息。

Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。

Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

针对上面4个Tab进行详细讲解一下各个功能：

① 查看资源HTTP头信息

在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers 、Request Headers以及Query String Parameters或者Form Data等信息。

② 查看资源预览信息

在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。

③ 查看资源HTTP的Response信息

在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容(纯字符串)。下图显示的是当选择的资源是CSS格式时的响应内容。

④ 查看资源Cookies信息

如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。

Name：cookie的名称。
Value：cookie的值。
Domain：cookie所属域名。
Path：cookie所属URL。
Expire/Max-Age：cookie的存活时间。
Size：cookie的字节大小。
HTTP：表示cookie只能被浏览器设置，而且JS不能修改。
Secure：表示cookie只能在安全连接上传输。

⑤ 分析资源在请求的生命周期内各部分时间花费信息

在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：

Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.

Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。

Proxy Negotiation 与代理服务器连接的时间花费。

DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。

Initial Connection / Connecting 建立连接的时间花费，包含了TCP握手及重试时间。

SSL 完成SSL握手的时间花费。

Request sent 发起请求的时间。

Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。

Content Download 获取Response响应数据的时间花费。

TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了，可以参见网络性能优化方案及里面的相关参考文档。

六、信息汇总区

信息汇总区中显示[请求数],[数据传输量],[加载时间信息]等信息

DOMContentLoaded事件是在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。DOMContentLoaded事件在Overview上用一条红色竖线标记，并且在Summary以蓝色文字显示确切的时间。

load事件是在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。load事件同样会在Overview和Requests Table上用一条蓝色竖线标记，在Summary也会以红色文字显示确切的时间。

结合DOM文档加载的加载步骤，DOMContentLoaded事件/Load事件触发时机如下：

解析HTML结构。

加载外部脚本和样式表文件。

解析并执行脚本代码。// 部分脚本会阻塞页面的加载

DOM树构建完成。//DOMContentLoaded 事件

加载图片等外部文件。

页面加载完毕。//load 事件

chrome浏览器Performance性能监控火焰图详解_chrome火焰图-CSDN博客

性能优化的目的
google官网说明：性能功能参考 | Chrome DevTools | Chrome for Developers

使用 Performance 前，我们最好打开 Chrome 的无痕模式。因为 Chrome 上一般有着大量的插件，会或多或少的影响页面的性能，所以我们关掉这个来避免对页面性能的影响。

我们每一次的UI的变化，都要经历以下步骤：

我们都知道像素管道有五步，JavaScript->样式计算->布局->绘制->合成。

人的眼睛大约每秒可以看到 60 帧，那么就代表我们每 16.7ms 就要看到 1 帧，一帧就要经历上图的 5 步，说明我们的每一个任务（task）不宜过长，这样就会导致用户对于界面感知的不友好性

fps 是指页面每秒帧数

fps = 60 性能极佳

fps < 24 会让用户感觉到卡顿，因为人眼的识别主要是24帧

根据谷歌统计的数据，用户在不同时间段内接收到的反馈，可能直接影响到对于网站的用户留存，如下图：

Performance功能区分类
我把 Performance 面板大概划分为操作区、设置区、报告区三块区域：

1.操作区：主要用于性能分析的开启、关闭、性能报告的上传下载等；

2.设置区：用于设置性能数据分析期间的各项指标，比如：CPU 运算能力、网络状态等等；

3.报告区：顾名思义，就是呈现最终性能分析报告的地方。

一、操作区
观察下图中用红线框起来的部分，这里有几个按钮：

按钮的功能大致相同，都是用于记录页面性能数据；两个按钮点击后都会出现下面这样的弹窗：

不过需要注意的是，这两种录制方式之间有一些不同：

点击(Record) 按钮，Chrome 会开始记录交互阶段的性能数据，需要手动点击 Stop 停止录制；

而点击(Start Profiling and reload page) 按钮，Chrome 会重新刷新页面并自动开始记录，等到页面完全渲染出来后自动结束记录。

清除报告
录制完成的数据，如果我们不需要了，就可以点击(Clear) 按钮来清除数据；是不是很一目了然呢？

当我们的数据录制完成，就可以点击(Save Profile) 按钮来将录制的报告下载保存在本地；有了下载，当然少不了它的好兄弟上传！点击(Load Profile) 就可以将本地报告再次上到 Performance 面板中；

报告对比
实际上，我们每次录制的报告都被自动留存起来；当存在多份性能报告时，还可以通过下拉切换查看不同的报告：

这样就能很方便地对比不同时间段的性能报告。图中用红虚线框起来的部分，就是用于切换报告的下拉框。

Screenshots 和 Memory
在操作区的右边还有两个复选框，Screenshots 和 Memory：

Screenshots
当勾选 Screenshots 后，在生成的性能报告中就会多出一栏用于记录页面在加载过程中的每一帧的视觉变化，并生成一系列快照；

并且当鼠标 hover 在这个区域时，就可以查看当前帧的快照：

通过查看这些快照，我们就可以了解页面在不同时间点的渲染情况。

Memory
而 Memory 功能则是用于观察页面的内存使用情况随时间的变化。

当勾选 Memory 功能后，在性能报告中就会显示页面的总内存使用量、堆内存使用量以及各种 JavaScript 对象的内存分配情况：

同样，当鼠标 hover 在下方不同类型文件占据内存情况的折线图时，就可以查看当前时间点下这些文件使用内存的情况。最后，操作区的(Collect garbage) 按钮用于手动触发 JavaScript 垃圾回收。

二、设置区
在文章前面简单介绍过，设置区主要用于设置性能数据分析期间的各项指标；下面我们来看看具体可以做哪些设置：

Disable JavaScript samples
默认情况下，Chrome 在做性能分析采样时会记录当前 JavaScript 执行的堆栈信息，并在报告区的 Main 部分呈现出来：

如果我们不关注 JavaScript 执行相关的性能，比如：测试在不同网络情况下的代码执行性能、测试渲染性能时；这种情况下就可以勾选 Disable JavaScript samples 这个选项，从而提高性能分析的效率；未勾选 Disable JavaScript samples 的情况下，报告区记录了 JavaScript 执行时的堆栈信息。

勾选了 Disable JavaScript samples 的情况下，报告区只记录了一些高级事件，比如：Function Call、渲染相关事件等。

Enable advanced paint instrumentation
这个选项用于启用高级绘制仪器；当你勾选了这个选项后，Chrome 将记录更详细的绘制信息，包括每个绘制操作的时间、持续时间、绘制区域等。

勾选了 Enable advanced paint instrumentation 后，当鼠标选中报告中 Frames 数据的某一帧时，在下方的面板里就会多出一个 Layers 的选项；

CPU 和 Network
在 CPU 下拉选项中，我们可以通过降低 CPU 的性能，来模拟低性能设备上的页面运行情况；比如移动设备，或者一些比较老旧的计算机；

而 Network 下拉框可以选择不同的网络条件，用于模拟网络不佳的情况下页面的运行情况。

Hardware concurrency
hardware concurrency 选项用于模拟硬件并发性能；勾选这个选项后，我们就可以选择从 1 到最大硬件并发性能水平之间的值，以模拟不同的硬件环境。

通过切换不同的 hardware concurrency 值，可以观察页面在不同硬件并发性能水平下的性能表现；这对于优化页面的并发处理和多线程任务非常有帮助。

硬件并发性能是指处理器（CPU）同时执行多个线程或任务的能力。现代计算机通常具有多核处理器，每个核心都可以同时执行多个线程。硬件并发性能的提高可以显著提升计算机的性能和响应能力。

三、报告区
接下来就是我们的重头戏，最终性能分析报告呈现的区域；我们之前介绍的操作、设置最终都是为性能报告服务。我们以掘金首页为例，来看看报告区都有哪些内容。

首先，我们要打开谷歌浏览器的无痕模式；默认快捷键是 Command+Option+N (Mac) 或者 Control+Shift+N (Windows, Linux)；然后打开掘金首页，点击(Start Profiling and reload page) 按钮来进行录制；等待几秒钟后，一份完整的性能报告就呈现出来啦：

从上图中可以看出，这份性能报告大概可以分为两块区域：概览区、性能报告区。

而所有的这些性能指标都是基于时间的维度来展示的，因此在性能报告中还有一条贯穿整个报告的时间线。使用无痕模式是为了避免安装的一些插件对性能测试产生影响。

概览区
首先，概览区的 x 轴就是时间线，而 y 轴展示了几个关键指标：CPU 占用情况、NET 网络请求情况、HEAP 堆内存使用量等；如果勾选了 Screenshots 还会有每一帧的绘制快照。

这些指标会以时间为顺序，通过图表的形式展现出来。

当我们用鼠标点击这个区域，在下方的性能报告和详情信息区域，就会呈现这一时间区间的性能情况：

性能报告区
这个区域呈现了许多性能指标项，我们一起来看看吧。Network 部分展现的是网络请求的瀑布图，我们点击，图标就可以展开这个面板：

从图中可以看出，这些网络请求的瀑布图有许多种颜色，这些颜色就代表了请求对应的文件类型：

蓝色: 请求 HTML 文档；

紫色：请求 CSS 文件；

黄色: 请求 JS 文件；

绿色: 请求图片；

Frames
Frames 区域展示了绘制一个帧所花费的确切时间；在这个部分，同样用颜色来区分了四种类型的帧：

空闲帧（白色）：表示在该帧中没有发生任何渲染或更新。

正常帧（绿色）：表示该帧在适当的时间内被渲染出来，没有出现延迟或问题。

部分呈现帧（黄色，带有稀疏的宽虚线图案）：表示 Chrome 尽力在适当的时间内渲染了部分视觉更新。例如：渲染器进程的主线程的工作延迟了，但合成器线程（如滚动）按时完成了渲染，则会出现这种情况。

丢帧（红色，带有密集的实线图案）：表示该帧由于性能问题或其他原因导致延迟，无法按时渲染。

Timings

Timings 这个模块展示了衡量网页性能（FP、FCP、DCL、LCP、L）的几个关键指标，以及完成指标对应的时间：

FP （First Paint）
指页面的首次渲染的时间点。在完成首次渲染之前，用户看到的都是没有任何内容的白色页面，也就是我们常说的白屏时间。FP 可以反映页面加载的整体速度。

FCP （First Contentful Paint）
指页面的首个内容绘制时间，即浏览器在页面上绘制出第一块有实际内容的区域（如文本、图像等）的时间点。FCP 反映了用户可以看到有意义的内容的时间。

DCL （DOM Content Loaded）
指当 HTML 文档被完全加载和解析后，DOM 树构建完成并且所有关联资源（如样式表、脚本等）已经下载完成，触发 DOMContentLoaded 事件的时间点。DCL 反映了页面的可交互性，表示页面已经准备好响应用户的操作。

LCP （Largest Contentful Paint）
指页面上最大的一个可见元素（如图片、文本等）绘制完成的时间点。LCP 是衡量页面加载速度的重要指标，它反映了页面主要内容的加载完成时间。

L （Load）
指页面完全加载完成的时间点。包括所有资源（如图片、样式表、脚本等）都已下载完成，并且相关的 DOM、CSSOM 和 JavaScript 都已经处理完成。L 反映了整个页面加载的时间。

Layout Shifts
这个指标用于衡量页面加载过程中发生的视觉不稳定性。

那么什么叫做视觉不稳定性呢？

实际上，当用户在页面加载期间进行交互时，如果页面中的元素发生意外的移动或调整，会导致页面上的元素重新排列，从而造成视觉上的不连续和不稳定感。

这种元素的移动可能会干扰用户的操作，例如点击了一个不想点到的按钮，或者导致误触其他元素。

我们点击 Layout Shifts 区域的色具体色块，在下方的 Summary 一栏就会展示此次位移的具体信息。

Main
这项指标可谓是整个性能报告中的重点区域，其中展示了主线程在进行的相关活动。由于 Main 的图表长得像一团团倒立的火焰，所以，我们将其称为火焰图。它展现了主线程在 Record 过程中做的所有事情，包括：Loading、Scripting、Rendering、Painting 等等。火焰图的横轴代表着时间，纵轴代表着调用堆栈。每一个长条代表执行了一个事件或函数，长条的长度代表着耗时的长短，如果某个长条右上角是红色的则表示该函数存在性能问题，需要重点关注。

与 Network 用固定颜色来区分请求类型不同，Main 指标中的颜色是随机分配的。但是来自同一个脚本的调用在记录中会被分配为相同的颜色。

长任务
小伙伴们可能已经留意到了，在有的 Task 中除了灰色的区域外，还有部分被红色密集实线覆盖，同时右上角还有一个红色的三角：这实际上是用来标识这个任务是个长任务。执行时长超过 50 毫秒的任务会被定义为长任务；而超过 50 毫秒的部分就会用这种红色密集实线覆盖，这些长任务可能会阻塞主线程，导致页面卡顿、无法及时响应用户输入等等；是我们需要重点关注的对象。

矩形堆叠逻辑
图中位于最上方的 Task 表示一个由浏览器调度和执行的任务单元；Task 的长度就表示这个任务执行时间的跨度。而 Task 下方的这些矩形是根据函数之间的调用关系来堆放的，比如上图中，一个指针事件 pointermove 的触发，导致了一个（匿名函数调用（Function Call）；而这个匿名函数调用又引起了 value 函数的调用...以此类推一直到最后的函数 n。

任务具体信息
下面我们来查看一下对应任务的具体信息。当我们选中任意一个任务时，下方的面板就会展现对应的信息：

内存走势图

JS Heap：表示 JS 占用的内存大小。

Documents：表示文档数。

Nodes：表示 Node 节点数。

Listeners：表示监听数。

GPU Memory：表示 GPU 占用数。

其中 FP、FCP、FMP 是同一条虚线，三者时间不一致。比如首次渲染过后，有可能出现 JS 阻塞，这种情况下 FCP 就会大于 FP。

其中折线表示变化情况，拿蓝线来说，表示JS内存使用情况，如果内存持续走高，表示内存没有被回收，就有可能是出现了内存泄漏。也可以通过Performance monitor来观察内存是不是一直走高，来判断是不是发生了内存泄漏。

Summary
Summary 选项卡展示了当前任务的具体信息，包括长任务警告、总任务时长、各个子任务耗时等等：

Bottom-Up
Bottom-Up 选项卡将当前任务下所有活动都展示出来，并且根据时间进行倒序排序。这样一来，一眼就能看出是哪个活动耗费了较长的时间：

并且还贴心的提供了筛选（Filter）功能和分组（Grouping）功能，方便我们分类查看：

图中可以看出，整个图表分为三列：

Self Time 表示这个根活动自身花费的时间；

Total Time 表示这个根活动自身以及导致的子活动花费的时间总和。

Activity 就是对应的活动名称；并且点击活动名称右侧的链接，还可以直接跳转到对应的源码。

Call Tree
Call Tree 选项卡可以用来查看当前任务下的根活动，以及根活动引发的一系列子活动的耗时。

根活动是那些导致浏览器做一些工作的活动。比如前面提到的 pointermove ，浏览器会触发一个Event活动作为根活动，该事件可能导致处理程序执行，依此类推。可以简单理解为火焰图顶层的活动。

Event Log
最后的 Event Log 选项卡是按照活动在记录过程中发生的先后顺序来呈现表格的：

Performance monitor
看起来，Performance 提供的性能监测功能已经较为完备，但是，它有两个问题：1.数据缺少实时性。2.数据面板过于复杂，不够直观。为了解决这两个问题，Chrome 提供了 Performance monitor 功能，以实时直观的数据展示页面性能。

通过点击页面中的操作，来观察内存走势，如果出现了JS heap size持续走高的情况，就有可能是出现了内存泄漏。

Lighthouse(Audits) 面板
来自 Google 的描述： Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告,会对页面的加载进行分析，然后给出提高页面性能的建议

点击analyze page load就可以生成一个报告：

Performance 性能

accessibility 无障碍使用

Best Practice 用户体验

SEO SEO 优化

Progressive Web App 页对于 PWA 的兼容性

source面板

在前面的博客里讲述过Element面板以及Console面板，这两块面板都是很重要也是经常使用到的面板，而今天所要讲述的source面板的重要性和实用性不亚于它俩。
首先，打开source面板：（F12->跳转source）

在这里插入图片描述
乍一看，此source面板分有三部分，接下来我们逐一进行讲述。

代码编辑器

在这里插入图片描述
此部分面板即为代码编辑器，此部分用于显示指定文件的源代码。
此版块是一定会显示，但是此板块无法单独执行操作，需要与其左边的板块或者右边的板块结合使用来完成自己想要实现的操作。
此板块左上角和右上角有一对对称的按钮，它俩的功能分别是显示/隐藏左/右板块。
在这里插入图片描述

此面板左下方有一个{}按钮，它的作用是让缩小后的文件恢复其可读性。
如下图所示：

这样一个源代码文件，代码非常密集，可读性非常差，点击{}按钮。

新生成一个formatted的文件，其代码风格的可读性焕然一新。

编辑 CSS 和 JavaScript

代码编辑器支持代码的修改编辑，其中CSS 更改操作会立即生效，且不需要保存。JavaScript 更改操作不会立即生效，需要Control+S保存后修改然后根据修改的地方进行对应的重运行方可生效。
注意：此操作只能修正在浏览器中运行的代码，不能真正修正代码此页面的代码，刷新页面就会一朝回到解放前，所以得记得及时修正自己服务器上的代码。

文件浏览器

最左边的板块即为文件浏览器，此板块列出了HTML，JavaScript，CSS和其他文件，包括附加到页面的图像。 Chrome扩展程序也可能会出现在这里。
在这里插入图片描述
每点击一个文件就会在其右边的代码编辑器上显示其文件的源代码。（不一定只是代码，图片等文件也可以显示）

点击此版块的 << 符号可看到此版块的五个重要功能区：

Page
Filesystem
Snippets
Overrides
Content scripts

Page，显示当前页面的一些资源文件。
Content scripts，显示当前浏览器所使用的插件的源文件。
在这里插入图片描述
Filesystem，此功能区我暂时还不清楚是干啥的，有兴趣的伙伴可以自己点击其跳转链接进行学习和研究。

Overrides，同上，有兴趣的伙伴也可以自行研究和学习。

这两功能区的内容待我后续学习后再补上。
最后，我们再看看更加实用和好玩的Snippets功能区。

Snippets功能区

简单来说，这个功能区的功能是保存一份自己所编写的js脚本代码段。
创建Snippet : （三种方式）
1.点击 + 号。
在这里插入图片描述
2.选择此面板的空白区域，右键->new。
3.Control+Shift+P->Create new snippet。

注意：创建好的snippet保存在浏览器中而不是当前页面里，所以切换到一个新的页面中，此snippet仍然存在。
运行Snippet :（四种方式）
1.选择一条snippet->右键->run
2.点击代码编辑器板块的右下角的三角号按钮。
在这里插入图片描述
3.快捷键Ctrl+Enter。
4.Control+P->!+当前snippet文件名->Enter。
注意：Control+Shift+P->Back等价于Control+P
示例代码：

console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

新建一个snippet文件填入此代码段并运行。
在这里插入图片描述

Snippet 的其它操作:
选择一条snippet->右键，这里面还有删除此snippet、重命名此snippet以及保存此snippet操作。
编辑Snippet，等同于在代码编辑器板块编辑代码。

JavaScript调试

终于到了最核心的部分，这个板块，顾名思义，围绕调试js代码而展开。
在这里插入图片描述
三种调试方式：

控制台console.log()。
代码中添加debugger。
devtools里打断点。

第一种方式在控制台面板介绍过也比较简单，这里就不重复说明。第二种方式实质与第三种方式一样，都是通过打断点进行调试，只不过直接在devtools打断点进行调试更为简便。
并且，在调试的时候更加推荐使用打断点的方式。与 console.log() 方法相比，断点可帮助您更快地查找和修正错误。

断点类型

1.代码行断点
普通代码行断点，点击源代码的所在行头即可设置此类型断点，显示为蓝色。
在这里插入图片描述
条件代码行断点，选择目标行头->右键->Add conditional breakpoint即可设置此类型断点，显示为黄色。（条件断点可按照设置的条件进行选择行暂停代码运行）

其中可在此版块的Breakpoints中查看并管理已设置的断点。
在这里插入图片描述
2.DOM断点
在Element面板中选择一个元素->右键->Break on->三种断点类型可选，也是一个蓝色的断点。

此版块的DOM Breakpoints可以查看所设置的DOM断点。
这个部分属于Element面板的补充内容，将在后续博客更新，这里就不做细讲。
3.XHR/Fetch 断点
可在此版块中的XHR/fetch Breakpoints中添加此类型断点。
在这里插入图片描述
4.事件侦听器断点
可在此版块中的Event Listener Breakpoints中添加此类型断点。

5.异常断点
此版块第一行最右边的那个按钮设置此类型断点。

第一行的这个按钮可以取消/开启全部的代码行断点。

调试工具

第一行左边的这五个按钮都是用于代码调试的工具。
在这里插入图片描述
第一个按钮：继续执行到下一个断点，如果没有其他断点，则直接执行到结束。（快捷键F8）
第二个按钮：运行下一个代码命令，但不会进入到函数里面。（快捷键F10）
第三个按钮：运行下一个代码命令，会进入到函数里面。（快捷键F11）
第四个按钮，执行完当前函数，跳转到调用此函数的函数。（快捷键Shift+F11）
第五个按钮，功能类似于第三个按钮，只是在异步操作时会有不同的表现。（快捷键F9）
接下来，我们再看看另外三个功能区Watch，Call Stack和Scope。
在这里插入图片描述
Watch：显示任何表达式的当前值，可以通过+来添加并查看自己想要看到的表达式的值。
Call Stack：显示嵌套的调用链，如果单击堆栈项（例如“onClick”），调试器将跳转到相应的代码，并且还可以检查其所有变量。
Scope：当前变量，查看当前的所有变量的值，包括局部变量和全局变量。

结语

js调试的基本知识大概就这些，百闻不如一练，看了这么多东西终究不如自己亲自动手操作一番效果来的更好，下期再见！

前端多线程之Worker-CSDN博客

前端开发工具DevTools的详细知识点总结（二）之前端数据库_devtools index-CSDN博客

前端开发工具DevTools的详细知识点总结（四）_node removal-CSDN博客

performance面板

这一章，我们一块来看看performance面板的常用功能，打开devtools并跳转到performance面板。
在这里插入图片描述
performance面板的最主要功能就是查看并优化页面的各方面性能，其中就包括最常见的页面渲染性能。（注：这块版本由于我自己目前用的并不多，所以目前这块知识的讲述会显得很浅显。）

记录表现

首先先来讲述此页面的常用按钮的功能使用。
在这里插入图片描述
最左边的第一个按钮和第二个按钮的功能在下方空白区域有说明，其功能分别是开始一个新的表现记录即记录运行时性能以及记录一个页面加载即记录加载性能。
注意：只有这两个按钮才能开启性能分析页面。
第三个按钮就是清除当前的性能分析页面的记录。
在这里插入图片描述
剩下的一些按钮以及其下面的这块可隐藏的功能区域几乎都是为了性能分析页面所服务，大家有兴趣可以自己试试。

性能分析

在这里插入图片描述
上图就是一个新的记录三秒的运行时性能表现，这个面板主要有上下两个部分且都是为了体现其性能表现，上半部分显得有些杂乱且有很多细节的性能分支，比如Frames、Main、Raster等等，随着所要查看的页面的不同还会有更多的细节分支，每个分支都有其各自的体现性能的方式。
相比之下，下半部分的性能显示就更为直观，以图中为例，3s的时间其中有1.5的时间用于页面渲染，显然此页面的渲染的代码性能并不高，有待优化。
除了Summary的面板查看性能外还有Bottom-up，Call Tree以及Event Log等三个面板，这里也不再详细讲述，有兴趣大家可以自己试试。
注意：随着鼠标下上半面板所选择的区域的不一样，下半面板的显示内容也会随之改变，默认情况的是选择全局Main板块。

渲染功能区

刚刚我们查看到页面的渲染部分耗时最大，接下来我们可以进一步查看具体的有关页面渲染的更多细节功能。还记得Ctrl+Shift+P的快捷键吗？没错，它就是打开devtools里很多隐藏功能区的快捷键，其中就包括一个大系列的抽屉功能，输入Show Render即可看到更多详细的渲染功能。
在这里插入图片描述
这里有很多有关查看页面渲染的功能选项并且也都有相应的英文解释，所以这里我就不做过多介绍。

渲染性能

知道了浏览器可以支持渲染功能，那么其最基本的底层原理又是什么呢？

60fps 与设备刷新率

目前大多数设备的屏幕刷新率为 60 次/秒。因此，如果在页面中有一个动画或渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致。
其中每个帧的预算时间仅比 16 毫秒多一点 (1 秒/ 60 = 16.66 毫秒)。但实际上，浏览器有整理工作要做，因此所有工作需要在 10 毫秒内完成。如果无法符合此预算，帧率将下降，并且内容会在屏幕上抖动。此现象通常称为卡顿，会对用户体验产生负面影响。

像素管道

像素管道即可以控制渲染的管道，其有五个区域：
在这里插入图片描述

JavaScript。一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。
Style。此过程是根据匹配选择器计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将应用规则并计算每个元素的最终样式。
Layout。在知道对一个元素应用哪些规则之后，浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。
Paint。绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。绘制一般是在多个层上完成的。
Composite。由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。

管道的每个部分都有可能产生卡顿。

定制devtools

这部分主要讲述通过devtools的内部功能设置来设定适合自己风格的devtools。

Settings和Drawer

这两大功能区域我在之前的文章里都提到过。
首先，settings里包含许多devtools的定制功能也是devtools里功能最丰富的区域，大家可以自行去哪里逛逛，两种常用的打开devtools的settings的方式：
（快捷键）F1/（Shift+?）或者单击settings按钮。
在这里插入图片描述
drawer是隐藏功能区域里的一类功能区，所以这里面是一些隐藏的定制devtools的功能。
两种打开方式：Esc或者（Ctrl+Shift+P）+drawer。

不难发现，目前总共有14种drawer：

如果有兴趣的话可以把隐藏区域的所有功能都试试，那里面除了drawer功能区域外还有Panel、Appearance、Console、Debugger、Elements、Global、Help、Mobile、Navigation、Network、Performance、Persistence、Rendering、Resources、Screenshot、Sensors、Settings、Sources这些功能区域。乍一看，功能区域非常多，但是其实有很多功能我们都以及打过照面。

面板重排序

这是原始的面板排序：
在这里插入图片描述
在不改变devtools宽度的情况下，此行只能显示五种面板，为了满足我们自己的风格需求我们可以更改面板的前后顺序（通过鼠标拖拽）以及显示的面板（通过最右边的选择按钮）。

并且我们还能够改变devtools的宽度来显示更多/更少的面板种类：
在这里插入图片描述

devtools的显示位置

devtools总共有四种显示位置可选：浏览器左边，浏览器右边，浏览器下边以及开辟一个新的窗口。
首先，点击devtools第一行的扩展按钮：
在这里插入图片描述
然后Dock side可以选择自己想要的devtools的显示位置。

devtools的主题背景

先看看如下两种devtools的背景效果图：
在这里插入图片描述

一种light主题，一种dark主题，有没有觉得dark主题似乎更酷。
打开方式：
首先打开Settings，在Preferences下的Appearance有Theme下拉按钮选项，有两套默认可选的主题背景，至于System preference是怎么玩的我暂时也不知道。
在这里插入图片描述

结语

送君千里终须一别，到此，经过五期的内容总结，devtools里的一些基本常用的功能都已经介绍完毕，但是我所介绍的这么多也只是devtools强大功能的冰山一角。剩余的内容要么就是比较简单也不常用，大家可以自己一眼就能看明白，要么就是我自己暂时也不会，所以这里只是一个暂时的终点。随着自己的继续学习，后面还会介绍有关devtools的更好玩更实用的功能文章。
最后，我在这里再给出devtools的官方教程，有条件的伙伴可以参看此教程进行学习：
https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn

前端开发工具DevTools的详细知识点总结（五）_如何将chrome浏览器的devtools设置成上下显示-CSDN博客

异步编程精要-CSDN博客

前端开发工具DevTools的详细知识点总结（一）-CSDN博客

打开DevTools

devtools,即Chrome 开发者工具，Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。
打开devtools的三种方式：

在Chrome菜单中选择更多工具再选择并点击开发者工具（右图即是Chrome菜单符号，位于屏幕的右上角）
在页面元素上右键点击，选择 “检查”（这个操作会直接跳转到指定元素的元素面板）
使用快捷键 Ctrl+Shift+I 或 F12

打开devtools后，如果是进入元素面板，那么它的大体样式应该就是这个样子，并且我们还能发现，除了Elements面板外还有Console，Sources，Network，performance等一系列其它板块的面板。
在这里插入图片描述
下图是所有类型的devtools面板公有的第一行：

除去中间部分表示各种类型的devtools面板，其最左边与最右边分别有两个按钮（按从左往右的顺序进行叙述）。

第一个按钮的功能就是查看页面内某个具体元素的元素面板，等价于选择此元素直接用第二种方式打开devtools；第二个按钮表示切换页面的显示形式（手机与电脑）；第三个按钮表示打开devtools的菜单选项；第四个按钮表示关闭devtools。
打开devtools的菜单选项：
在这里插入图片描述
这里是dectools里面一些很常用的功能，首先Dockside可以控制devtools位于屏幕的打开方位，Show console drawer打开抽屉形式的控制台面板，Run command打开devtools里的commend menu，Setting就是设置devtools里面的很多东西等等。更多的功能以及其作用大家还是自己亲自玩玩才更加清楚。

元素面板

打开元素面板的方式直接打开devtools即可，如果默认不是Elements面板，直接点击Elements面板进行跳转即可，其实一般情况下用第二种检查元素的方式打开此面板最为高效。
元素面板的操作简单来看也就三种操作：选择一个元素，查看CSS以及改变CSS

在这里插入图片描述
此面板可粗略分成左右两个子面板。左边面板结构比较简单由上下两部分组成，上边面板即此页面的html代码，可以查看也能修改，修改后能生效但是刷新页面后又会恢复原样；下边面板是显示当前元素的一个层级结构，点击后上边面板的选择区域可进行对于的跳转，主要是查看的功能。
在右边面板中又有许多子面板，styles，Computed，Event Listeners等等。

Style面板

第一行：
在这里插入图片描述

这一行主要有四个功能区，从左往右分别是过滤搜索，改变元素状态，给元素新增类选择器以及创建一个新的样式规则。
过滤搜索就是按照一些特定的css样式属性进行过滤显示。
在这里插入图片描述
改变元素状态，点击后会有五种可选状态。

给元素新增类选择器即如下图所示：

创建一个新的样式规则，这里可以允许我们给元素自定义增添许多样式。

主体部分：

这里面显示的是一些已被定义的css样式，相比而言Computed面板显示的是一些实际应用的css样式。
element.style，在这里你可以给当前元素新添一些css样式，你也可以直接在下面的具体区域去修改或者新添css样式，横线划掉的样式代表未生效的样式。
鼠标hover到某一个样式区域栏，此区域的右下角会显示一个当前区域生效的菜单选项，此菜单选项就是为了更高效的辅助开发，hover此菜单选项，显示如下：
在这里插入图片描述

从左往右功能依次是，添加text-shadow，添加box-shadow，添加color，添加background-color，最后一个加号与第一行的加号功能一致。
最下方：
显示此元素的盒子模型（可查看与修改）
在这里插入图片描述

Computed面板

在这里插入图片描述
此面板显示实际应用的css样式，所以所有样式都只能查看，不能修改。此面板结构很简单，只有上下两部分：上半部分显示实际应用的元素盒子模型；下半部分显示一些具体的实际应用的css样式。至于中间的一个过滤搜索框与一个显示内容button的功能可参考Styles面板，这里就不再叙述。

devtools取色器

打开devtools的取色器
在这里插入图片描述
点击含有颜色的图标即可：

此取色器可大致有9个功能板块：

颜色色调（细色调）
滴管，可直接吸取网页的指定颜色（默认是已启用，使用最为方便）
点击后复制颜色值到剪切板
颜色值
调色板
颜色色调（粗色调）
不透明度
颜色显示值切换器（在当前颜色的RGBA，HSLA和十六进制表示之间切换）
调色板切换器

控制台面板

两种类型的控制台面板的打开方式：直接在面板打开和在折叠抽屉中打开。
折叠抽屉，是devtools隐藏的一个命令菜单，这里可以调用很多devtools里的其它功能模块，两种打开方式：一种是前面已叙述的点击devtools设置+run command，一种是快捷键Command+Shift+P。
在这里插入图片描述
直接在面板打开的两种方式：通过devtools跳转，使用快捷键Control+Shift+J （无需提前打开devtools）。

通过折叠抽屉打开的两种方式：打开命令菜单并运行Show Console，打开设置并运行Show Console command或者直接使用快捷键Esc。
在这里插入图片描述
此两种模式的控制台不能同时显示，所以还有另一种显示：

但是这两种形式的控制台面板功能是一模一样的。

基本功能介绍

控制台面板的功能主要有三类：显示信息，过滤信息和运行JavaScript代码。
还是先看第一行功能区：
在这里插入图片描述
从左往右，依次有七个功能区。
首先，第一个按钮是个显示/隐藏侧边栏的按钮，其功能是进行控制台面板的显示信息过滤。

显示侧边栏时其右边的Default levels下拉菜单会被禁止使用，因为它的作用也是过滤信息并且侧边栏的过滤功能包含它。这是Default levels下拉菜单栏：
在这里插入图片描述
共有四种选项，按照严重级别排序分别为：Verbose（详细）,Info（信息），Warnings（警告）,Error（错误）。
在侧边栏的信息过滤功能中，除了上述四种过滤方式外还可以根据具体的messages进行过滤。
这一行中还有一个具有过滤功能的功能区——过滤框。
过滤框主要能按照以下三种类型的输入进行信息过滤：

URL
上下文
正则表达式

第二个按钮的功能是清除控制台信息，除此之外还有三种清除控制台信息的方式：

右键单击消息，然后选择Clear Console
在控制台中键入clear()，然后运行
快捷键Control+L

接下来，top下拉菜单栏的功能是改变不同的JavaScript目录。
第四个眼睛标志的按钮是用于创建一个Live表达式，此表达式的值可实时更新。

最后一个settings按钮具备显示信息的控制功能，其里面有八个选择项：

此功能区域的设置也可以在devtools设置里面的Preferences里面进行设置：

这八个选项的具体功能我在这就不具体叙述，大家可以自己亲自动手玩玩便知。

控制台应用

介绍完控制台面板的一些基本功能区，接下来介绍控制台具体怎么用。
首先，此控制台可以直接运行用户自定义编写的JavaScript代码，包括用JavaScript代码来修改当前页面。编写代码的语法我这里就不做介绍，可自行参看JavaScript语法。
注意：在控制台中Enter键代表运行此单元代码块，而换行行为的快捷键为Shift+Enter。
在这里插入图片描述
此控制台还拥有许多自己的API，都是console.xxx()的形式，如console.log()，console.count()，console.error()等等，这里我也不进行详细介绍，大家有兴趣可以自己去玩玩。
除此之外，控制台中还有另外一类很实用的API：
$_： 返回最近计算的表达式的值。
在这里插入图片描述
$0 - $4： $0返回最近选择的元素或JavaScript对象，$1返回第二个最近选择的元素，依此类推。

$(selector)： 使用指定的CSS选择器返回对第一个DOM元素的引用。
（此函数等价于document.querySelector() ）

$$(selector)： 返回与给定CSS选择器匹配的元素数组。
（此函数等价于document.querySelectorAll()）
在这里插入图片描述

还有 $x(path)，copy(object)，getEventListeners(object)，dir(object) 等一些列API，这里我也不再过多叙述。

网络面板

打开网络面板的方式是先打开devtools然后再跳转到Network。
在这里插入图片描述
网络面板的功能主要有五种：记录网络请求，改变加载行为，过滤请求，请求排序以及分析请求。

功能区介绍

第一行的功能区：
在这里插入图片描述
第一个红色按钮表示停止记录网络请求，快捷键 Control+E。
第二个按钮表示清除请求表中的所有请求。
第三个按钮是开启过滤功能，点击后会新出现一行过滤功能选项。

最左边的那个过滤框是按属性（例如请求的域或大小）过滤请求，然后旁边的单选框表示是否隐藏data URLs，后面那些选项是按照请求类型进行过滤，最后还有一种可以按照时间进行过滤（稍后再叙述）。
注意：在类型过滤时除All选项外，按住Ctrl可以进行多选过滤。
第四个搜索按钮可以当在HTTP标头和所有资源的响应中搜索某个字符串或正则表达式。
在这里插入图片描述
Preserve log可以保存保存跨页面加载的请求，Disable cache 可以禁用缓存。
Online下拉菜单栏可以模拟慢速网络连接，总共有四种可选状态。

倒数第三按钮倒数第二按钮分别是导入HAR文件和导出HAR文件。
最后一个Network Settings按钮里面虽然只有四个选项，但是都很强大。
在这里插入图片描述
Use large request rows： 可以使得网络请求表中有更多空白。

Group by frame： 将请求按照框架进行分组显示。

Show overview： 展现网络请求的细节。

在这里就可以通过时间进行请求过滤。

Capture screenshots： 捕捉屏幕截图可以分析用户在等待页面加载时所看到的内容。
在这里插入图片描述

分析请求

在这里插入图片描述
默认情况下，请求表显示以下列：

Name，资源的文件名或标识符。
Status，HTTP状态码。
Type，所请求资源的类型。
Initiator，发送请求的对象。
Size，响应标头和响应主体的组合大小，由服务器提供。
Time，从请求开始到响应中最后一个字节接收的总持续时间。
Waterfall，每个请求活动的可视化细节。

注意：

鼠标hover到Name列可看到完整的URL。
所有列都是支持resize
请求表的列元素显示是动态的，右键可选则自己想要显示的列
允许自定义列元素

自定义列元素：鼠标右键列头，hover到Response Headers，点击Manage Header Columns，点击Add custom header…
在这里插入图片描述
查看响应体：点击Name列里面的具体行即可

此时又会出现一个新的面板，这里有五个模块，包括HTTP响应头，响应体预览，响应体等等。这里我也不具体叙述，大家可以自己去查看。
在此版块的最下面还有一个请求信息的汇总：
在这里插入图片描述

结语

到此，第一期也是最初版的devtools知识笔记告一段落，由于我自己也是devtools的初学者，所以知识深度只能至此且文章内容也难免会有错误之处，大家有看到的欢迎评论区指出。随着devtools的继续学习和使用，我也会持续更新此文章内容，希望此文章能对大家有所帮助。
最后，我给出我学习devtools所参考的官方教程链接：devtools使用教程

概览 | Chrome DevTools | Chrome for Developers

Chrome Devtools 高级调试指南（新）-腾讯云开发者社区-腾讯云

前言

本文暂未涉及Performance面板的内容。后续会单独出一篇，以下是目录：

常用命令和调试
黑盒脚本：Blackbox Script
控制台内置指令
远程调试WebView

1. Chrome Devtools 的用处

前端开发：开发预览、远程调试、性能调优、bug跟踪、断点调试等
后端开发：网络抓包、开发调试Response
测试：服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试
其他：安装扩展插件，如AdBlock、Gliffy、Axure等

2. 菜单面板拆解

Elements - 页面dom元素
Console - 控制台
Sources - 页面静态资源
Network - 网络
Performance - 设备加载性能分析
Application - 应用信息，PWA/Storage/Cache/Frames
Security - 安全分析
Audits - 审计，自动化测试工具

3. 常用命令和调试

1. 呼出快捷指令面板：cmd + shift + p

在Devtools打开的情况下，键入cmd + shift + p将其激活，然后开始在栏中键入要查找的命令或输入"?"号以查看所有可用命令。

…: 打开文件
:: 前往文件
@：前往标识符（函数，类名等）
!: 运行脚本文件
>;: 打开某菜单功能

1.性能监视器：> performance monitor

将显示性能监视器以及相关信息，例如CPU，JS堆大小和DOM节点。

2.FPS实时监控性能：> FPS选择第一项

3.截图单个元素：> screen 选择 Capture node screenhot

2. DOM 断点调试

当你要调试特定元素的DOM中的更改时，可以使用此选项。这些是DOM更改断点的类型：

Subtree modifications: 子节点删除或添加时
Attributes modifications: 属性修改时
Node Removal: 节点删除时

如上图：监听form标签，在input框获得焦点时，触发断点调试

3. 黑盒脚本：Blackbox Script

剔除多余脚本断点。

例如第三方（Javascript框架和库，广告等的堆栈跟踪）。

为避免这种情况并集中精力处理核心代码，在Sources或网络选项卡中打开文件，右键单击并选择Blackbox Script

4. 事件监听器：Event Listener Breakpoints

点击Sources面板
展开Event Listener Breakpoints
选择监听事件类别，触发事件启用断点

如上图：监听了键盘输入事件，就会跳到断点处。

5. 本地覆盖：Local overrides

使用我们自己的本地资源覆盖网页所使用的资源。

类似的，使用DevTools的工作区设置持久化，将本地的文件夹映射到网络，在chrome开发者功能里面对css 样式的修改，都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。

创建一个文件夹以在本地添加替代内容；
打开Sources >; Overrides >; Enable local Overrides，选择本地文件夹

打开Elements，编辑样式，自动生成本地文件。
返回Sources，检查文件，编辑更改。

6. 扩展：Local overrides 模拟 Mock 数据

对于返回json 数据的接口，可以利用该功能，简单模拟返回数据。

比如：

api 为: http://www.xxx.com/api/v1/list
在根目录下，新建文件www.xxx.com/api/v1/list，list 文件中的内容，与正常接口返回格式相同。

对象或者数组类型，从而覆盖掉原接口请求。

4. 控制台内置指令

可以执行常见任务的功能，例如选择DOM元素，触发事件，监视事件，在DOM中添加和删除元素等。

这像是Chrome自身实现的jquery加强版。

1. $(selector, [startNode])：单选择器

document.querySelector的简写语法：

$('a').href;
$('[test-id="logo-img"]').src;
$('#movie_player').click();

控制台还会预先查询对应的标签，十分贴心。还可以触发事件，如暂停播放：

此函数还支持第二个参数startNode，该参数指定从中搜索元素的“元素”或Node。此参数的默认值为document

2. $$（选择器，[startNode]）：全选择器

document.querySelectorAll的简写，返回一个数组标签元素语法：

$$('.button')

可以用过循环实现切换全选

或者打印属性

此函数还支持第二个参数startNode，该参数指定从中搜索元素的“元素”或Node。此参数的默认值为document 用法：

var images = $$('img', document.querySelector('.devsite-header-background'));
   for (each in images) {
       console.log(images[each].src);
}

3. $x(path, [startNode])：xpath选择器

$x(path)返回与给定xpath表达式匹配的DOM元素数组。

例如，以下代码返回<p>页面上的所有元素：

$x("//p")

以下代码返回<p>包含<a>元素的所有元素：

$x("//p[a]")

xpath多用于爬虫抓取，前端的同学可能不熟悉。

4. getEventListeners（object）：获取指定对象的绑定事件

getEventListeners(object)返回在指定对象上注册的事件侦听器。返回值是一个对象，其中包含每个已注册事件类型（例如，click或keydown）的数组。每个数组的成员是描述为每种类型注册的侦听器的对象。用法:

getEventListeners(document);

相对于到监听面板里查事件，这个API便捷多了。

5. 花式console

除了不同等级的`warn`和`error`打印外

还有其它非常实用的打印。

1. 变量打印：%s、%o、%d、和%c

const text = "文本1"
console.log(`打印${text}`)

除了标准的ES6语法，实际上还支持四种字符串输出。分别是：

console.log("打印 %s", text)

%s：字符串
%o：对象
%d：数字或小数

还有比较特殊的%c，可用于改写输出样式。

console.log('%c 文本1', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue')

当然，你也可以结合其它一起用(注意占位的顺序)。

const text = "文本1"
console.log('%c %s', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue', text)

你还可以这么玩：

console.log('%c Auth ', 
            'color: white; background-color: #2274A5', 
            'Login page rendered');
console.log('%c GraphQL ', 
            'color: white; background-color: #95B46A', 
            'Get user details');
console.log('%c Error ', 
            'color: white; background-color: #D33F49', 
            'Error getting user details');

2. 打印对象的小技巧

当我们需要打印多个对象时，经常一个个输出。且看不到对象名称，不利于阅读：

以前我的做法是这么打印：

console.log('hello', hello);
console.log('world', world);

这显然有点笨拙繁琐。其实，输出也支持对象解构：

console.log({hello, world});

3. 布尔断言打印：console.assert()

当你需要在特定条件判断时打印日志，这将非常有用。

如果断言为false，则将一个错误消息写入控制台。
如果断言是true，没有任何反应。

语法

console.assert（assertion，obj）

用法

const value = 1001
console.assert(value===1000,"value is not 1000")

4. 给console 编组：console.group()

当你需要将详细信息分组或嵌套在一起以便能够轻松阅读日志时，可以使用此功能。

console.group('用户列表');
console.log('name: 张三');
console.log('job: ?前端');
// 内层
console.group('地址');
console.log('Street: 123 街');
console.log('City: 北京');
console.log('State: 在职');
console.groupEnd(); // 结束内层
console.groupEnd(); // 结束外层

5. 测试执行效率：console.time()

没有Performance API 精准，但胜在使用简便。

let i = 0;
console.time("While loop");
while (i < 1000000) {
  i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
  // For Loop
}
console.timeEnd("For loop");

6. 输出表格：console.table()

这个适用于打印数组对象。。。

let languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);

7. 打印DOM 对象节点：console.dir()

打印出该对象的所有属性和属性值. console.dir()和console.log()的作用区别并不明显。若用于打印字符串，则输出一摸一样。

console.log（"Why，hello!"）；
console.dir（"Why，hello!"）;

在输出对象时也仅是显示不同（log识别为字符串输出，dir直接打印对象。）。

唯一显著区别在于打印dom对象上：

console.log(document)
console.dir(document)

一个打印出纯标签，另一个则是输出DOM树对象。

6. 远程调试WebView

使用Chrome开发者工具在原生Android应用中调试WebView。

配置WebViews进行调试。在 WebView类上调用静态方法setWebContentsDebuggingEnabled。 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); }
手机打开usb调试，插上电脑。
在Chrome地址栏输入：Chrome://inspect

正常的话在App中打开WebView时，chrome中会监听到并显示你的页面。

点击页面下的inspect，就可以实时看到手机上WebView页面的显示状态了。（第一次使用可能会白屏，这是因为需要去https://chrome-devtools-frontend.appspot.com那边下载文件）

除了inspect标签，还有 Focus tab:

它会自动触发Android设备上的相同操作

其他应用里的WebView也可以，例如这是某个应用里的游戏，用的也是网页：

参考资料

Practical Chrome Devtools — Common commands & Debugging
Mobile web specialist — Remote Debugging
Console Utilities API Reference
Console API Reference

posted @ 2025-02-05 12:13 CharyGao 阅读(2571) 评论(0) 收藏举报

刷新页面返回顶部

硅基文明

代码改变不了世界，但是改变世界需要代码。