Chrome 开发者工具（DevTools）快速入门——前端必备技能

在前端开发中，Chrome 开发者工具（DevTools） 是我们排查问题、优化性能、理解浏览器行为最强大的助手之一。无论是想快速定位页面样式异常、分析接口请求，还是调试 JavaScript 逻辑，DevTools 都能提供直观高效的方式帮助我们“看清代码背后发生了什么”。
这篇笔记将带你快速入门，从最基本的面板功能到常用调试技巧，让你能在实战中灵活运用它，提升开发效率与问题解决能力。

1. 打开方式与放大缩小

1. 快捷键：

• Windows/Linux：F12 或 Ctrl + Shift + I
• macOS：Command + Option + I

1. 右键打开：在页面任意元素上右键 → “检查 (Inspect)”
2. 菜单打开：点击右上角 ⋮ → “更多工具” → “开发者工具”

在使用 Chrome 开发者工具时，可以通过 鼠标滚轮 快速调整界面缩放。
只需将鼠标移动到调试面板区域，然后按住 Ctrl（Windows） 或 Command（Mac） 键，同时滚动鼠标滚轮，即可实现 放大 或 缩小 整个调试界面。

2. 命令菜单

2.1. 打开命令菜单

macOS：command + shift + P

Windows：ctrl + shift + p

2.2. 切换 DevTool 的主题

输入快捷键打开菜单栏，搜索 theme 就可以切换 dark 和 light 主题色

2.3. 截屏

Chrome 开发者工具（DevTools）中的 命令面板（Command Menu） 里有四个与截图（Screenshot）相关的命令，很多人其实都没搞清楚它们的区别。

输入 screenshot

Capture area screenshot（捕获区域截图）：手动框选局部截图，类似于截图软件。

Capture full size screenshot（捕获完整尺寸截图）：保存长图、长截屏，例如打开豆瓣的网页，然后选择这个就会把整个网页截图下来。

Capture node screenshot（捕获节点截图）：截取单个元素，例如选择了某一个按钮，然后选择这个会把选择的这个节点作为图片保存下来。

Capture screenshot（捕获屏幕截图）：截取屏幕所见内容。

2.4. Dock

“Dock” 决定了 调试面板相对于网页的停靠位置（Docking position），也就是 DevTools 在页面中的摆放方式。

输入 dock

Dock to bottom：停靠底部

Dock to right：停靠右侧

Dock to left：停靠左侧

Undock into separate window：独立窗口显示

其实也就是类似于这个功能：

2.5. 折叠代码

在命令面板中输入 “Code”，然后勾选 “Enable code folding” 选项，即可在 Sources 面板 中启用代码折叠功能。这样就能通过点击左侧的小箭头来折叠或展开代码块，方便阅读与定位逻辑结构。

3. 常用面板介绍

4. Elements

4.1. 什么是 Elements

Elements 面板 可以 直接看到网页的 DOM 结构、样式规则和渲染状态，并能实时修改、验证效果。

简单来说：Elements 面板 用于查看、编辑和调试网页的 HTML DOM 结构 与 CSS 样式。

它可以：

• 实时检查网页结构
• 直接修改 HTML/CSS
• 调试样式覆盖问题
• 分析盒模型布局
• 查看事件绑定和伪类状态

4.2. 界面结构

上面是 DOM 树结构（HTML），下面是 样式区（Styles / Computed）

4.3. 检查元素

打开调试面板后，点击左上角的 箭头图标（选择元素模式），然后将鼠标移动到想要检查的元素上。
此时，页面中的元素会被高亮显示，并在其周围出现多层颜色区域。

这些高亮区域代表了元素在页面布局中的不同部分：

• 🩵 淡蓝色：表示元素本身（content + padding + border）所占的空间，即元素的主体区域。
• 🟧 淡橙色：表示 margin（外边距），即元素与周围其他元素之间的间距。
• 💚 淡绿色：表示 padding（内边距），即元素内容与其边框之间的间距。

通过观察这些颜色区域，你可以非常直观地了解每个元素在页面中的盒模型布局和空间占用情况。

4.4. 切换移动端

打开调试面板后，点击左上角的 手机与平板图标（Toggle device toolbar），即可进入移动端预览模式。上方工具栏共有五个主要选项：

1. Dimensions（设备尺寸）
   用于选择设备型号（如 iPhone、Pixel、iPad 等），或者选择 Responsive 来自定义视口大小。
2. 百分比（Zoom）
   用于放大或缩小视图，帮助你查看不同缩放比例下的布局细节。
3. Network conditions（网络条件）
   点击“No throttling”下拉框，可以模拟不同的网络环境，比如：

• Fast 3G：模拟较慢的移动网络
• Slow 3G：模拟极慢的网络环境
• Offline：模拟断网状态
  这对测试网站的加载速度与离线表现非常有用。

1. Save-Data: default / on / off（节省数据模式）
   这个选项用于模拟浏览器是否开启了“节省数据模式”（Save-Data Header）。
   在移动端浏览器（尤其是 Android Chrome）中，用户可能会启用此模式来减少流量消耗。

• default：保持默认状态，不发送 Save-Data 头。
• on：模拟浏览器发送 Save-Data: on 请求头，表示用户希望减少数据使用。
• off：强制关闭节省数据模式。

开发者可以通过检测 Save-Data 请求头，在网站中提供更轻量化的资源（比如加载低分辨率图片或简化动画）。

1. Rotate（旋转）
   点击小旋转图标，可以快速切换 横屏 / 竖屏 模式。

4.5. 查询 DOM 节点

在 Elements（元素）面板 中，我们可以通过快捷键快速查找页面中的节点。
按下 Ctrl + F（Windows） 或 Command + F（Mac），下方会出现一个搜索框。

你可以在其中输入：

• 类名（class） — 例如 .header
• ID（id） — 例如 #app
• 标签名（tag） — 例如 div、img
• 文本内容 — 直接输入文字即可查找包含该文本的节点

Chrome 会在页面结构中高亮显示匹配的元素，方便快速定位到目标节点，非常适合在大型 DOM 树中查找特定元素。

4.5.1. 使用 CSS Selector 查询

CSS Selector（CSS 选择器）是前端最常用的元素定位方式之一，语法和 CSS 选择规则完全一致。搜索时输入这些选择器，Chrome 会自动匹配 DOM 中符合条件的所有节点，并在页面中高亮显示。

4.5.2. 使用 XPath 查询

XPath（XML Path Language）是一种用于在 XML/HTML 文档中定位节点的语言，它比 CSS Selector 更灵活，尤其适合结构复杂或动态生成的页面。

4.5.3. 通过 console 面板定位

在 Console（控制台）面板 中，也可以直接通过命令快速定位到页面中的 DOM 元素。
例如输入以下语句：

inspect(document.getElementById('section_one'))

然后按下 Enter，Chrome 会自动切换到 Elements（元素）面板，并高亮显示对应的节点。

这种方式非常适合在控制台中调试脚本时，快速查看某个元素的结构和样式。

4.6. 编辑样式

在 Elements（元素）面板 中，先选中你想修改的元素，然后在右侧的 element.style 区块直接添加新的 CSS 样式。

element.style { color: red; background-color: #f5f5f5; }

输入完成后，这些样式会立即生效，并自动以 行内样式（inline style） 的形式应用到元素上。

在 Elements 面板 → Styles（样式） 区域，除了你自己定义的样式外，继续往下滑动

还会看到一些特殊标记：

1. user agent stylesheet

• 表示 浏览器默认样式，即浏览器自带的 CSS。
• 例如，<h1> 标签默认有一定的 margin，这就是浏览器提供的样式。

1. Inherited from xx

• 表示该样式是 从父元素 xx 继承 下来的。
• 某些属性（如 color、font-family）会自动继承父元素的值。

1. Pseudo

• 表示 伪元素或伪类 的样式，如 ::before、::after、:hover。
• 可以通过点击 Styles 面板上方的 :hov 按钮手动触发伪类状态进行调试。

继续向下滑动，可以看到 图形化盒模型面板，关于 Computed 面板的详细内容将在后续章节中讲解。

4.7. 伪类状态调试/常驻（:hover / :active / :focus 等）

在网页中，元素可以在不同状态下呈现不同样式，比如：

• :hover：鼠标悬停
• :active：鼠标按下
• :focus：获得焦点

如果希望在调试时 让这些状态保持常驻，可以按照以下步骤操作：

1. 在 Elements（元素）面板 中选中目标元素。
2. 点击右上角的 :hov 按钮，展开伪类选项。
3. 勾选你想固定的状态（如 :hover、:active 等），元素会立即进入该状态并保持不变。

提示：

• 勾选后，DOM 树中元素旁会出现 橙色小点，表示该状态已固定。
• 这种方式方便在不同状态下调试样式，而无需反复操作鼠标或键盘。

下面我给大家一段 demo，方便大家调试

• Hover：把鼠标移到按钮上即可看到颜色变化。
• Active：点击按钮时会立即变色。
• Focus：点击输入框获得焦点时，边框变色。
• Focus-within：点击容器内的输入框，整个容器边框会变色。
• Focus-visible：通过 Tab 键 聚焦输入框时显示绿色边框和阴影。
• Target：点击链接跳转到目标元素，目标元素高亮显示。

比如说在下面的 <button>Hover 我</button> 这是一个 :hover，那么在调试面板中就勾选 :hov 即可。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类状态 Demo</title> <style> body { font-family: Arial, sans-serif; padding: 30px; } h2 { margin-top: 40px; } /* hover */ .hover-btn { background-color: #3498db; color: white; border: none; padding: 10px 20px; cursor: pointer; margin-bottom: 20px; transition: background-color 0.3s; } .hover-btn:hover { background-color: #2c80b4; } /* active */ .active-btn { background-color: #e74c3c; color: white; border: none; padding: 10px 20px; cursor: pointer; margin-bottom: 20px; transition: background-color 0.1s; } .active-btn:active { background-color: #c0392b; } /* focus */ .focus-input { display: block; margin-bottom: 20px; padding: 8px 12px; border: 2px solid #ccc; outline: none; transition: border-color 0.3s; } .focus-input:focus { border-color: #f39c12; } /* focus-within */ .focus-within-box { border: 2px solid #ccc; padding: 15px; margin-bottom: 20px; transition: border-color 0.3s; } .focus-within-box:focus-within { border-color: #8e44ad; } /* focus-visible */ .focus-visible-input { display: block; margin-bottom: 20px; padding: 8px 12px; border: 2px solid #ccc; outline: none; } .focus-visible-input:focus-visible { border-color: #27ae60; box-shadow: 0 0 5px rgba(39, 174, 96, 0.5); } /* target */ .target-box { padding: 15px; border: 2px solid #ccc; margin-bottom: 20px; transition: border-color 0.3s; } .target-box:target { border-color: #e67e22; background-color: #fdf2e9; } a { display: inline-block; margin-bottom: 10px; color: #3498db; } </style> </head> <body> <h1>伪类状态 Demo</h1> <h2>1. :hover</h2> <button>Hover 我</button> <h2>2. :active</h2> <button>Active 我（鼠标按下）</button> <h2>3. :focus</h2> <input type="text" placeholder="Focus 我"> <h2>4. :focus-within</h2> <div> <label>Focus 内的输入框：</label> <input type="text" placeholder="输入文字"> </div> <h2>5. :focus-visible</h2> <input type="text" placeholder="Tab 选中我"> <h2>6. :target</h2> <a href="#target1">点击我激活 target</a> <div> 我是 target 元素，点击上方链接即可激活我 </div> </body> </html>

4.8. CSS 类（Class）调试相关功能

1. 查看类名：在 Elements 面板中，选中某个元素，在 DOM 树上方可以看到 class="xxx"。可以直接点击类名编辑或删除。
2. 添加 / 删除类：在右侧 Elements → Styles → .cls 输入框中，有时会看到 “+ Add class”（添加类）按钮。点击按钮即可输入新的类名，Chrome 会立即应用该类对应的样式。
3. 切换类名：DevTools 支持快速勾选 / 取消已有类，模拟类的开启或关闭状态。非常适合调试某些交互效果（比如按钮激活态、隐藏 / 显示状态）。

4.8.1. 添加/删除类名

调试代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Demo</title> <style></style> </head> <style> .bg { background-color: red; width: 200px; } .color { color: white; } </style> <body> <div>添加/删除类名</div> </body> </html> 

在这个示例中，div 只添加了 bg 类，没有 color 类。通过 Chrome DevTools 的 :cls 功能，可以为选中的元素临时添加 color 类，从而实时应用该样式而不影响其他元素，非常方便进行样式调试。

4.8.2. 进阶使用方法（强制类切换 / 单独禁用类）

假设你有一个盒子，里面包含多个子元素（items），每个子元素都有同样的类名 item，样式如下：

.item { padding: 10px; background-color: #f5f5f5; margin-bottom: 5px; }

4.8.3. 问题场景

• 如果你在 Styles 面板 修改了 .item 的 padding，所有具有 .item 类的元素都会同步变化。
• 这时如果只想修改 某一个特定元素 的样式，直接修改类会影响到其他元素。

使用 :cls 功能

1. 在 Elements 面板 中选中你想单独调试的元素。
2. 找到右侧 Styles 面板 上方的 :cls / Add class`（或类似的类控制区域）。
3. 勾选或取消某个 class 的状态，Chrome 会 只对选中的元素生效，不会影响同类的其他元素。

效果示例

• 取消了某个 item 的 .item 类，只有这个元素的 padding 被去掉，其他元素保持原有样式不变。
• 这样就能方便调试复杂布局中某个元素的个性化样式，而无需修改全局 CSS。

4.9. 复制样式与 HTML 结构

4.9.1. 复制样式

如果你看到网页上某个喜欢的样式，例如 豆瓣绿色按钮，可以通过 Chrome DevTools 快速复制样式：

1. 在 Elements 面板 中选中目标元素。
2. 将鼠标悬停在元素的 类名 上，右键选择：Copy → Copy styles
3. 然后将复制的 CSS 粘贴到自己的代码中即可。

复制的样式是该元素当前生效的最终样式，包括继承和伪类状态的效果。非常适合快速借鉴网页上的设计，而无需手动查看和编写每条 CSS。

4.9.2. 复制 HTML 结构

在 Chrome DevTools 中，你可以快速复制页面元素的 HTML 结构：

1. 打开 Elements（元素）面板，选中你想复制的节点。
2. 右键点击选中的元素，在弹出菜单中选择：Copy → Copy outerHTML
3. 然后将复制的 HTML 粘贴到自己的代码中即可。

Copy outerHTML 会复制选中元素及其 子节点的完整 HTML。

如果只想复制 内部内容（不包含当前元素标签），可以选择：Copy → Copy innerHTML

非常适合快速获取网页结构进行调试或复用。

4.10. 图形化面板（Computed）

4.10.1. Computed 的主要特点

显示最终样式

• Computed 面板列出元素所有实际生效的 CSS 属性和值。
• 与 Styles 面板不同，Computed 面板会合并继承、自定义样式和浏览器默认样式，展示最终结果。

图形化盒模型（Box Model）

• Content（内容）：元素本体大小
• Padding（内边距）：内容与边框间距
• Border（边框）：边框宽度
• Margin（外边距）：元素与外部的间距
• 可以直观看到每个区域的尺寸（如上下 padding 15px，左右 20px，border 0 等）。

支持快速筛选和搜索

• 可以在顶部搜索框中输入属性名快速定位，例如 margin、color、font-size。
• 便于排查某个属性为什么没生效。

实时修改样式

• 点击数值可以直接编辑 padding、margin、width、height 等，并立即在页面生效。
• 对调试布局和响应式设计非常实用。

4.10.2. 观察布局空间

接着 4.7 章节 的内容，观察 Computed 面板，向下滑动到最底部，会看到 图形化盒模型（Box Model）面板，它可以直观展示元素在页面中的布局空间，包括内容区域、内边距、边框和外边距。

• 元素本体（Content）：显示元素内容区域占用的空间
• Padding（内边距）：元素内容与边框之间的距离，例如：
• Border（边框）：元素边框厚度，例如：0
• Margin（外边距）：元素与外部其他元素之间的间距

可以看到 padding 上下是 15，左右是 20，boder 是 0 等

图形化面板会用不同颜色高亮显示这些区域（Content / Padding / Border / Margin），便于快速理解元素在页面中的实际占位和布局关系。

小提示：

• 计算样式显示的是 最终生效值，包括继承和覆盖的结果。
• 点击面板中的数值，可以直接修改 margin、padding 或 width/height 并实时预览效果。

4.10.3. 快速查询与搜索

假设你选中一个元素，想查看它的 背景颜色，可以在 Computed 面板 上方的 搜索输入框 输入 background 或相关属性名。搜索后，点击旁边的 蓝色小按钮，DevTools 会快速跳转到该样式 在 CSS 文件或 Styles 面板中的定义位置，方便查看和调试。

在 Computed 面板 或相关调试区域中，Rendered Fonts 显示了元素当前实际使用的 字体（font-family） 信息，包括浏览器最终渲染时选择的字体。
这个功能可以帮助你快速确认字体是否正确生效。

4.10.4. Computed 面板功能：Show all 与 Group

在 Computed 面板 中，顶部有两个实用选项，可以帮助你更高效地查看元素样式：

1. Show all

• 默认情况下，Computed 面板只显示 生效的样式属性。
• 勾选 Show all 后，会显示元素的 所有 CSS 属性（包括未生效或被覆盖的属性）。
• 适合排查哪些属性被继承、覆盖或未生效。

1. Group

• 将样式按 类型分组，如 Box Model、Text、Background 等。
• 可以更直观地查看相关属性，快速定位需要调整的样式。
• 关闭 Group 则按字母顺序列出所有属性。

总结：

• Show all → 显示所有属性，不遗漏任何样式信息。
• Group → 按类型分组，更方便阅读和调试。

4.11. 布局面板（Layout）

Layout 面板主要分为两个部分：Grid 和 Flexbox。
这两者正是我们在前端构建页面时最常用的两种布局方式——Grid（网格布局）用于实现二维布局，而 Flexbox（弹性盒布局）用于一维排列。

在 Layout 面板中，Chrome 会自动检测并列出页面中所有使用了 Grid 或 Flexbox 的容器，你可以在这里直观地查看它们的布局结构、对齐方式、间距以及层级关系，从而更方便地分析和调试页面的整体布局效果。

调试示例：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Layout 面板学习 Demo</title> <style> body { font-family: sans-serif; padding: 20px; background-color: #fafafa; } /* === Flex 布局部分 === */ .flex-container { display: flex; justify-content: space-around; align-items: center; gap: 10px; background-color: #e0f7fa; padding: 20px; border: 2px solid #0097a7; margin-bottom: 40px; } .flex-item { width: 80px; height: 80px; background-color: #4dd0e1; display: flex; justify-content: center; align-items: center; border-radius: 8px; font-weight: bold; color: white; } /* === Grid 布局部分 === */ .grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); gap: 10px; background-color: #fff3e0; padding: 20px; border: 2px solid #f57c00; } .grid-item { background-color: #ffb74d; display: flex; justify-content: center; align-items: center; font-weight: bold; border-radius: 8px; color: white; } </style> </head> <body> <h2>Flex 布局示例</h2> <div> <div>A</div> <div>B</div> <div>C</div> </div> <h2>Grid 布局示例</h2> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html>

在 Layout 面板中，如果勾选 Grid/Masonry overlays，页面上会出现一层带有数字标识的网格线。
这些数字表示网格的 行列编号：

• 正数 表示从左到右、从上到下的顺序（例如，第 1 列、第 2 行）；
• 负数 表示从右向左、从下往上的倒序（例如，倒数第 1 列、倒数第 2 行）。

通过这些数字标识，我们可以直观地了解每个网格单元在布局中的具体位置，从而更方便地调试 Grid 布局 的行列分布与对齐方式。

Show line numbers：显示数字编号（1, 2, 3...）

Show line names：显示命名的线（如 col-start, row-end）

Hide line labels： 隐藏所有标签（数字 + 名称都不显示）

注意： 如果你用的是普通 grid（没命名），那 Show line names 自然不会有任何显示，这是正常的。

Show track sizes：显示每行/列的尺寸（如 100px、1fr、2fr）

Show area names ： 在格子中显示 header / sidebar / main / footer

Extend grid lines： 网格线延伸到页面外，便于全局观察（辅助观察线）

在 Layout 面板中，除了 Grid 以外，下面还有 Flexbox 区域。
这里会自动列出页面中所有使用了 display: flex 的容器。

通过勾选对应的选项，可以直观地查看 Flex 布局的方向、对齐方式、间距分布等信息。
例如，你可以选择：

• 显示主轴与交叉轴方向；
• 高亮 Flex 项的排列顺序；
• 查看每个子元素在 Flex 容器中的空间分配情况；
• 调试 justify-content、align-items、gap 等属性的实际效果。

这些可视化选项能帮助我们快速理解布局在不同对齐或伸缩规则下的表现，非常适合排查 Flex 项不对齐、间距异常等问题。

当页面中的元素使用了 Grid（网格布局）或 Flexbox（弹性盒布局）时，Chrome 会在元素右侧自动显示一个小标签（例如 grid 或 flex）。

点击这个标签即可快速切换布局辅助线的显示状态：

• 点亮标签后，会在页面上显示该布局的辅助线与结构标识（如网格线、主轴、交叉轴等）；
• 再次点击则会关闭辅助线，恢复正常页面显示。

这种方式无需手动进入 Layout 面板，非常方便在页面中直接可视化布局结构，特别适合在调试复杂嵌套布局或快速比对多个容器时使用。

除了 Layout 面板，在 Styles 面板中也可以直接调试布局。
当选中使用了 Flexbox 或 Grid 的元素时，
在 CSS 样式规则旁边会出现一个小图标（通常是一个格子或箭头标识）：

• 点击该图标，会显示该元素的 布局辅助线，
  • Flex 元素会显示主轴和交叉轴方向、对齐方式、子项间距等；
  • Grid 元素会显示网格线、行列编号或命名、区域名称等。
• 再次点击即可关闭辅助线。

这种方式无需切换到 Layout 面板，就能在 Style 面板中快速可视化布局结构，方便在修改 CSS 时即时查看效果。

4.12. 绑定事件面板（Event listenters）

Event Listeners 是 Chrome DevTools 中专门用来 查看和调试 DOM 元素绑定的事件 的面板。
它可以帮助你快速找出某个元素上注册了哪些事件，以及事件的回调函数位置，从而方便调试交互逻辑。

1. 查看绑定的事件类型

• 面板会按照事件类型（如 click、mouseover、keydown 等）进行分类显示。
• 你可以快速找到元素上绑定了哪些事件。

1. 查看事件回调函数

• 点击事件类型展开列表，可以看到绑定该事件的回调函数。
• DevTools 会显示 函数的源文件和行号，方便直接跳转到代码中调试。

1. 按作用域查看事件

• 可以选择查看事件绑定在：
• Selected Node（当前选中节点）
• Ancestors（父级节点上的事件，冒泡捕获阶段）
• All Nodes（页面中所有节点上的事件）

1. 删除或禁用事件

• 面板中可以右键点击事件回调函数，移除事件监听器，方便调试。

调试代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Demo</title> </head> <body> <div>点击我</div> <script> const button = document.querySelector(".btn"); button.addEventListener("click", handleClick); function handleClick() { console.log("你点击了按钮！"); } </script> </body> </html>

如上代码，在 Event Listeners 面板中，选中某个元素后，可以看到该元素绑定的所有事件，例如 click 事件。

点击 事件旁边的删除图标，即可移除该事件监听器。删除后，再次点击该元素，原来的回调函数就不会被执行了。

这种方式非常方便调试事件逻辑，尤其适合排查 事件冲突或无效事件 的问题。

4.13. Properties 面板

Properties 面板用于查看 选中 DOM 元素的所有属性和方法，包括原生属性、事件、原型链等。
它不仅显示 HTML 属性，也可以查看 JavaScript 绑定在该元素上的属性。

4.13.1. 主要功能

1. 查看元素的所有属性

• 包括标准 HTML 属性（如 id、class、value）和 DOM 内部属性（如 _value、_checked 等）。
• 可快速了解当前元素的状态。

1. 查看事件绑定情况

• 会列出元素绑定的事件（类似 Event Listeners 面板），以及事件的回调函数。
• 适合快速检查元素上绑定的自定义属性和事件。

1. 查看原型链（Prototype）

• 展示元素继承的原型对象，包括方法和属性。
• 可以直接展开查看内置方法（如 appendChild、getAttribute 等）。

1. 调试 JavaScript 对象属性

• 不仅限于 DOM 元素，console 输出的 JS 对象也可以用 Properties 面板查看其所有属性和方法。
• 对于复杂对象和自定义类实例，能清晰看到继承链和所有可用方法。

4.13.2. 使用场景

• 查看 DOM 属性值：快速确认 input、checkbox、select 等元素当前状态。
• 调试事件和自定义属性：检查 JS 动态绑定在元素上的数据。
• 查看对象原型链：分析对象继承、方法调用情况。
• 调试复杂对象：便于了解对象结构和内部属性，辅助 JS 调试。

4.14. Accessibility

Accessibility 面板是 Chrome DevTools 中用于 检查网页无障碍（A11y）信息 的工具。
它可以帮助开发者了解页面元素如何被 屏幕阅读器、键盘导航或辅助技术 识别，确保网站符合无障碍标准。

1. 查看元素的无障碍属性

• 包括 role、aria-* 属性、标签文本、可见性、可交互状态等。
• 可以快速确认元素是否对辅助技术可访问。

1. 树状结构展示

• Accessibility 面板会显示当前元素在 Accessibility Tree（辅助功能树） 中的位置。
• 通过树状结构，你可以了解父子关系、嵌套层级及可访问性信息。

1. 属性与状态

• 名称（Name）：屏幕阅读器朗读的文本内容
• 角色（Role）：元素在无障碍层面的功能类型（如 button、link、textbox）
• 状态（State）：元素当前状态（如 disabled、checked、expanded 等）

1. 调试辅助功能问题

• 能快速定位元素缺少 aria-label、role 不明确或不可交互的问题。
• 适用于 WCAG / ADA 无障碍标准检查。

如果某个元素没有在辅助功能树中显示，说明屏幕阅读器可能无法识别它，通常需要添加可访问属性或调整 HTML 结构。

对于动态更新的内容（如弹窗、模态框），可以结合 Accessibility 面板和 ARIA live regions 测试内容是否被实时朗读。

5. Console（控制台）

Console 面板是 DevTools 中用于 查看日志、执行 JavaScript 代码以及调试脚本 的核心工具。
它不仅可以显示网页运行时的错误信息，也可以直接执行 JS 代码，方便快速测试和调试。

5.1. 执行 JavaScript 代码

5.1.1. 执行语句

在 Console 面板中输入例如： let a = 1

• 指向右边的箭头（>）表示这是你输入的代码。
• 指向左边的箭头（<）表示该语句的 返回值，在这个例子中是 undefined。

也就是说，右箭头标识输入，左箭头标识执行结果或返回值。

5.1.2. $_

$_ 是 Chrome Console 中的一个 快捷变量，用于 访问最近一次表达式的结果。
它可以让你无需重新输入变量或表达式，就能直接引用上一次执行的返回值。

在 Console 中输入一条语句，例如： 2 + 3，执行后，Console 会显示返回值 5。 然后输入 $_ ，Console 会返回上一次表达式的结果，即 5。

注意：

• $_ 仅指向 上一条执行的返回值，连续使用时会不断更新为最新结果。
• 如果上一条语句没有返回值（例如 let a = 1），$_ 的值为 undefined。

5.1.3. $0 快捷变量

在 Chrome DevTools Console 中，有一些 快捷变量 用于快速引用最近选中的 DOM 元素：

1. 在 Elements 面板中选中某个元素，例如一个 <div>。
2. 切换到 Console 面板，输入：$0，返回当前选中的 DOM 元素。
3. 如果你连续选择了多个元素，可以使用 $1、$2 来引用之前选中的元素。

注意：

• $0 会随着你在 Elements 面板的选择不断更新。
• $1、$2 等保存的是 历史选中元素，最长可追溯到 $4。

5.2. Console 常用方法

Chrome DevTools 的 Console 提供了丰富的方法，用于 输出信息、调试、分组、计时和追踪。下面是常用方法的介绍：

5.2.1. console.log()

输出普通信息或者变量值

console.log('Hello, World!'); console.log('Value of a:', a);

5.2.2. console.error()

输出错误信息，通常显示为红色，便于区分

console.error('Something went wrong!');

5.2.3. console.warn()

输出警告信息，通常为黄色

console.warn('This is a warning!');

5.2.4. console.table()

以表格形式展示数组或对象，便于对比和查看数据结构。

const users = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}]; console.table(users);

5.2.5. console.clearn()

清空 Console 面板所有输出

console.clear();

5.2.6. console.group()/console.groupEnd()

将日志分组，方便查看层级结构。

console.group('User Info'); console.log('Name: Alice'); console.log('Age: 25'); console.groupEnd();

5.2.7. console.time()/console.timeEnd

记时，用于性能测试。

console.time('LoopTime'); for(let i=0;i<100000;i++){} console.timeEnd('LoopTime'); // 输出耗时

5.2.8. console.assert()

断言，如果条件为 false，则输出错误信息。

console.assert(a > 10, 'a must be greater than 10');

5.2.9. console.trace()

显示代码执行路径（堆栈跟踪），帮助定位调用来源。

function foo() { function bar() { console.trace('Trace here'); } bar(); } foo();

5.2.10. 场景总结

• log / warn / error → 调试信息输出
• table → 查看数组/对象结构
• clear → 清理 Console
• group / groupEnd → 分组信息，层级清晰
• time / timeEnd → 测量执行时间
• assert → 条件断言调试
• trace → 查看函数调用路径

5.3. Log 级别筛选

在 Console 面板顶部，可以通过 Log 级别筛选 来控制显示哪些类型的日志：

• Default：默认情况下，所有日志类型都会显示(除了 Debug 信息)，不进行过滤。
• 取消勾选 Info：会隐藏 console.log() 等普通日志输出；
• 取消勾选 Warnings：会隐藏 console.warn() 的警告信息；
• 取消勾选 Errors：会隐藏 console.error() 的错误信息；
• 取消勾选 Verbose：会隐藏 console.debug() 的调试输出

5.4. 监视变量（Watch Expressions）

小眼睛用于 实时监视变量或表达式的值变化。
无论你在 Console、Sources 断点调试、还是脚本运行过程中，小眼睛都能动态更新这些值。

调试代码：

let count = 0; setInterval(() => { count++; }, 1000);

直接在控制台观察 count 的值时，系统会实时显示并更新它的变化，不再需要手动调用 console.log()。

注意：

• Watch 支持任意 JavaScript 表达式，不仅仅是变量。
• 如果表达式报错（变量未定义），会显示红色错误提示。
• 它在 断点调试时尤其好用，可以与 Scope（作用域）配合查看变量。

总结：小眼睛就是你的“变量监控面板”，能让你在调试时实时观察任何值的变化，而无需频繁写 console.log()。

6. Sources

6.1. 按键含义

这些按钮是 Source 面板中进行代码调试（debugger）时的核心工具，主要用来控制代码在断点处的执行流程。

6.1.1. ⏸️ Pause script execution（暂停脚本执行）

当页面的 JavaScript 代码正在运行时，点击该按钮会立即暂停所有脚本的执行。

页面会冻结在当前的执行点，方便你查看此时的变量值、调用栈等信息。

场景示例：

比如页面卡住或执行了错误逻辑，可以点击此按钮强制暂停，查看当前代码状态。

6.1.2. ⤴️ Step over next function call（跳过函数调用）

执行下一行代码。

如果下一行是函数调用，不进入函数内部，而是直接执行整个函数后返回结果。

场景示例：

“Step over” 就是“跨过去”，跨过函数体内部。

function add(a, b) { return a + b; } let result = add(2, 3); // 当前断点在这里 console.log(result);

点击 “Step over” → 不会进入 add() 内部，而是直接执行完并返回 5。

6.1.3. ⬇️ Step into next function call（进入函数调用）

执行下一行代码。

如果这一行是函数调用，则进入函数内部，从函数第一行开始逐步调试。

场景示例：

“Step into” 就是“走进去”，进入函数体内部。

6.1.4. ⬆️ Step out of current function（跳出当前函数）

从当前函数内部直接执行到函数结束位置并返回上一层调用点。

常用于你已经在函数内部调试完毕，想返回主逻辑的情况。

场景示例：

“Step out” 就是“跳出去”。

6.1.5. ▶️ Step（继续执行到下一个断点）

让脚本从当前断点处继续运行，直到遇到下一个断点或者脚本执行结束。

场景示例：

在多个断点之间快速跳转时非常常用。

6.1.6. Deactivate breakpoints（禁用断点）

“Deactivate breakpoints” 的意思是：临时关闭（禁用）所有断点，但不会删除它们。

也就是说，你设置的所有断点（包括行断点、DOM 断点、事件断点等）仍然保留，只是暂时不生效

场景示例：

当你想让脚本继续执行，不受断点打断时，可以点击它。点击后断点图标会变灰，Chrome 不会在任何断点处暂停。你可以再次点击启用断点，之前的断点会恢复原状。

function sayHi() { console.log("Hi"); } function sayBye() { console.log("Bye"); } sayHi(); // 断点1 sayBye(); // 断点2

• 点击运行 → 程序会在第一个断点暂停。
• 如果这时你点击「Deactivate breakpoints」按钮（灰掉），
  再点 ▶️ 执行 → 它就不会再在第二个断点处停下，而是直接执行完毕。

6.1.7. 总结

6.2. JavaScript 调试（debugger 的两种调试方法）

在掌握了 Chrome 调试工具的基础操作之后，我们可以进一步学习 JavaScript 调试。
调试是前端开发中非常重要的一环，它能帮助我们快速定位问题、分析代码执行过程。

在实际开发中，最常用的调试手段之一就是使用 debugger。
下面我们来看一看 debugger 的两种使用方法，以及它们在调试中的应用场景。

6.2.1. 方法一：代码中添加 debugger 语句

这是最直接、最常用的一种方式。

使用方法：在代码中插入一行 debugger;，当程序执行到这一行时，浏览器会自动暂停执行，并切换到 Sources 面板。

6.2.2. 方法二：在 Sources 面板中手动打断点

这是更灵活的调试方式，适合你不想改动源码时使用。

使用方法：

• 打开 Sources 面板。
• 在左侧文件树中找到要调试的 JS 文件。
• 点击代码行号，即可在对应行设置一个断点。
• 刷新或触发对应逻辑，程序执行到该行时会自动暂停。

6.2.3. 对比总结

6.3. 监测变量（watch）

点击右侧的 加号（＋），即可在 Watch 面板 中添加需要监听的属性或变量。
当代码运行后，只要该变量有了值或发生变化，Watch 区域就会实时显示并更新其当前值。
例如，如果代码中存在一个变量 color，在 Watch 面板中添加 color 后，就能动态监控它的值变化。

6.4. 通过 DOM 断点追踪页面变化

在 Elements 面板 → Break on...（中断点调试） 有一个重要功能，用于在 DOM 结构发生变化时自动暂停代码执行，帮助我们快速定位修改来源。

1. Subtree modifications（子树修改）：当前选中元素子节点发生变化（例如新增、删除或移动子元素）时，代码会自动中断。
2. Attribute modifications（属性修改）：当元素的 属性值（如 class、id、style、src 等）被修改时，自动中断执行。
3. Node removal（节点移除）：当选中元素被从 DOM 中删除时，自动中断执行。

调试代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Break On Demo</title> <style> .container { border: 2px solid #3498db; padding: 10px; margin: 20px; } .item { padding: 5px; margin: 5px; background-color: #f5f5f5; } </style> </head> <body> <div> <div>原始元素</div> </div> <button>添加子节点</button> <button>修改属性</button> <button>删除节点</button> <script> const box = document.getElementById("box"); // 添加子节点 document.getElementById("add").onclick = () => { const div = document.createElement("div"); div.className = "item"; div.textContent = "新添加的节点"; box.appendChild(div); }; // 修改属性 document.getElementById("attr").onclick = () => { box.style.borderColor = "red"; box.setAttribute("data-updated", "true"); }; // 删除节点 document.getElementById("remove").onclick = () => { box.remove(); }; </script> </body> </html>

比如，在调试代码中，为 id 为 box 的元素添加一个 Subtree modifications（子树修改）断点。
此时在 Elements → DOM Breakpoints 面板中可以看到该断点。
当点击按钮触发“添加子节点”的操作时，页面会立即进入调试模式，并自动跳转到 Sources 面板，定位到 box.appendChild(div) 这一行代码。
这就说明正是这段代码修改了该元素的子节点结构。

6.5. Event Listener Breakpoints

在 Sources 面板 → Event Listener Breakpoints 区域，你可以看到一系列按类别分组的事件类型（如鼠标、键盘、定时器、DOM 变化等）。
只需勾选某个事件类型，当该事件被触发时，调试器就会自动暂停在对应的 JavaScript 代码处。

有时候我们的代码是写在框架（例如 Vue）中，当我们在 Event Listener Breakpoints 中勾选了 click 并点击按钮时，调试器可能会跳转到 Vue 的内部源码文件，而不是我们自己的业务代码。

6.6. Call stack

其实，这种情况下我们并不需要调试框架的源码，只想关注自己的逻辑。
这时可以在右侧的 Call Stack（调用栈） 面板中，找到对应的框架脚本，右键选择 “Add script to ignore list”（添加到忽略列表）。

这样做之后，调试器就会自动忽略框架文件，在触发事件时直接定位到你自己的业务代码，调试过程会更加清晰高效。

7. NetWork

7.1. 字段介绍

Network 面板字段说明：
在 Network 面板中，每一条请求都会展示详细的信息。下面是常见字段的含义：

• Name：请求名称，表示资源文件的名称或请求的 URL。
• Status：服务器返回的 状态码，用于判断请求是否成功（如 200 表示成功，404 表示未找到等）。
• Type：资源类型，例如 document、script、xhr、image 等，表示请求的文件类型。
• Initiator：发起请求的来源，比如 index 表示是由 index 文件触发的请求。
• Size：资源的大小，显示已下载数据与实际资源大小的对比。
• Time：请求完成所耗费的时间。
• Waterfall：以瀑布流的形式直观展示每个请求的时间线，鼠标悬停其上可以查看请求的详细加载阶段（如排队、DNS 查询、等待响应等）。

在 Network 面板中，你可以通过右键点击表头来自由定制显示的字段。
在弹出的菜单中，勾选或取消勾选对应选项，即可添加或删除列，比如是否显示 Protocol、Priority、Cookies、Connection ID 等信息。
这可以帮助你根据调试需求，只保留对当前分析最有用的字段，让界面更简洁高效。

7.2. Record/stop network log（开始或停止记录网络日志）

Record network log（记录网络日志）

• 当按钮为红色实心圆时，表示 正在记录网络请求。
• 此时 Chrome 会捕获并显示页面中所有发出的请求（包括 XHR、Fetch、图片、CSS、脚本等）。

Stop network log（停止记录网络日志）

• 点击红色按钮后，它会变成灰色空心圆 ⚪，表示 暂停记录。
• 此时页面即使继续发送请求，Network 面板中也不会再显示新的请求。

简单来说，当按钮为灰色状态时，表示 已暂停监听网络请求，新的请求不会被记录；
当按钮为红色状态时，表示 正在监听网络请求，此时所有网络活动都会被实时捕获并显示在 Network 面板中。

7.3. Clear network log（清除日志）

在 Network 面板 中，红色圆点旁边有一个 “清空”图标（🚫），它的作用是：

点击 Clear network log 按钮后，会立即清除当前所有已捕获的网络请求记录，让面板恢复为空白状态。

7.4. 筛选区

在 Network 面板 的过滤栏中，你可以根据请求类型快速筛选需要查看的网络请求：

• All：显示所有请求，不进行筛选。
• XHR / Fetch：仅显示 Ajax 请求（如通过 XMLHttpRequest 或 fetch() 发送的请求）。
• JS / CSS / Img / Media / Font / Doc：按文件类型分类展示，例如脚本、样式表、图片、音视频、字体或文档。
• Other：显示其他类型的请求，如 WebSocket、Manifest 等。

此外，在右上角还有一个搜索框 Filter，可用于查找特定请求——可以输入 URL、参数名、响应内容关键字 等信息，快速定位所需请求，方便进行精准分析。

7.5. Preserve log（保留日志）

默认情况下，当你在 Network 面板 中刷新页面时，之前捕获的所有请求记录都会被清空。

启用 Preserve log（保留日志）选项后，Chrome 会在页面刷新或跳转后仍然保留之前的网络请求记录，不会被自动清除。

7.6. Disable cache（禁用缓存）

在 Network 面板 中，勾选 Disable cache 后，Chrome 会在页面刷新或发起请求时忽略浏览器缓存，每次都会从服务器重新获取资源，而不会使用本地缓存的文件。

注意：

• 只在 DevTools 打开时生效，关闭 DevTools 或取消勾选后，浏览器会恢复正常缓存行为。
• 常与 Preserve log 一起使用，方便刷新页面时保留完整请求记录。

7.7. Throttling（节流器）

在 Network 面板 中，Throttling 功能可以模拟不同网络环境，以便观察网页在各种网络速度下的加载表现和性能问题。

• 可以模拟 慢速 3G、快速 3G、离线 等不同网络环境，也可以自定义速度。
• Chrome 会限制请求的 带宽和延迟，帮助前端开发者调试慢网情况下的页面表现和接口响应。
• 选择 Custom → Add… 来添加自定义网络节流器。

7.8. More network conditions

在 More network conditions 中，除了之前介绍的 Caching（缓存） 和 Network（节流器） 外，还包括两个重要设置：

• User Agent（用户代理）：可以修改浏览器的 User-Agent，用来模拟不同设备或浏览器发起请求，从而测试网页在不同环境下的表现。
• Accepted content-encodings（可接受内容编码）：告诉服务器浏览器能够解码哪些压缩格式的响应（如 gzip、deflate、br），确保服务器返回的数据浏览器可以正确解析。

例如，当在 User Agent 中选择 Firefox—Windows 并发起请求时，Network 面板的 Request Headers 中就会显示我们模拟的 User-Agent，表明浏览器已经以 Firefox 的身份向服务器发送请求，从而可以测试不同浏览器下的页面或接口表现。

7.9. Import/Export HAR file

Network → Export HAR，可以将当前捕获的所有网络请求导出为 HAR 文件。可以用于离线请求分析、性能报告共享、问题复现和调试。

Network → Import HAR，可以加载之前保存的 HAR 文件到 DevTools 中。DevTools 会以与实际抓包相同的方式显示请求信息，便于分析历史网络数据，而无需再次访问页面。

8. Application

Chrome DevTools 中的 Application 面板 用于查看和管理网页在浏览器端存储的数据、缓存资源以及相关应用信息。它主要涉及 存储、缓存、服务端信息和安全相关内容，是前端开发和调试中非常重要的工具。

以下是核心模块介绍：

1. Local Storage / Session Storage（本地存储 / 会话存储）

• 存储键值对数据，用于持久化或会话级别的数据保存。
• 可直接查看、编辑或删除存储的数据。

1. Cookies（Cookie 管理）

• 查看网页设置的所有 Cookie，包括名称、值、Domain、Path、Expires 等信息。
• 可修改、删除或添加 Cookie，用于调试登录、权限、会话等功能。

1. IndexedDB

• 浏览器提供的 NoSQL 数据库，用于存储结构化数据。
• 可查看数据库结构、表、数据条目，支持增删改查操作。

1. Web SQL（已废弃，但部分浏览器仍支持）：类似 SQLite 的客户端数据库，可用于调试历史项目。
2. Cache Storage（缓存存储）：

• 管理 Service Worker 或 Cache API 缓存的资源。
• 可查看缓存的请求、响应以及大小，用于调试 PWA 离线缓存。

1. Application Cache（应用缓存，已废弃）：用于老版本网页离线访问，现代 PWA 已很少使用。
2. Service Workers

• 查看当前注册的 Service Worker，以及状态、控制页面等信息。
• 可更新、注销或停止 Service Worker，调试离线功能。

1. Manifest:显示 PWA 应用清单信息，包括图标、名称、主题颜色、启动 URL 等。
2. Frames / Security

• Frames：查看页面的 iframe 结构及资源。
• Security：查看页面的 HTTPS 状态、证书信息和安全警告。

例如在 Console 面板 中执行：document.cookie = "username=zhangsan" 然后切换到 Application 面板 → Cookies，就能看到刚刚设置的 username=zhangsan Cookie 已经被成功写入。

9. Performance

Performance 面板用于记录并分析页面的运行过程（加载与交互），帮助你找出性能瓶颈：JS 卡顿、长任务、布局/重绘开销、网络阻塞、渲染帧率丢失、以及影响用户体验的关键指标（如 FCP、LCP、CLS、TBT/INP 等）。

ht 这个网站（https://googlechrome.github.io/devtools-samples/jank/）是由 Google 开发者提供的一个性能测试示例页面。
点击 “增加” 按钮后，页面会不断生成大量元素，随着数量的增加，渲染与计算压力逐渐上升，页面的性能也会明显下降，出现卡顿。
而点击 “优化” 按钮后，可以看到页面运行变得流畅许多，清晰展示了性能优化前后的对比效果

9.1. 按钮解释

9.1.1. Record（记录性能）

开始捕获网页的性能数据（CPU、JS、渲染、内存等）。

流程：

1. 打开 DevTools → 选择「Performance」面板
2. 点击 Record（录制按钮）
3. 在录制期间执行你想分析的操作（比如点击按钮、切换页面）
4. 再次点击 Record（停止录制）
5. 浏览器会生成一份详细的性能时间线报告

结果：

• 你能看到 Main Thread（主线程） 上的任务分布；
• 识别出长任务（Long Tasks）；
• 找出卡顿、渲染延迟等性能问题。

常用于定位：页面卡顿、渲染慢、脚本执行耗时。

9.1.2. Record and Reload（记录并重新加载）

在 页面加载的同时自动开始性能录制，用于分析页面加载性能。

流程：

1. 选择 “Record and Reload”；
2. 浏览器会自动刷新页面并从 加载开始 就开始录制性能。

特点：

• 能完整捕获从 DOMContentLoaded、Load 事件开始到首屏渲染全过程；
• 特别适合分析首屏性能（TTFB、FCP、LCP、DOMContentLoaded、Load Event 等指标）。

适用场景：首屏加载慢；想优化白屏时间；想了解哪些脚本阻塞了渲染。

9.1.3. Clear（清空记录）

清除当前面板中已录制的性能数据。

用途：

• 清空旧数据，方便重新录制；
• 避免多次录制混淆；
• 保持性能分析结果简洁。

点击效果：

• Timeline（时间轴）会被清空；
• 之前的性能采样结果（CPU/Memory/FPS）被重置。

9.1.4. 总结

9.2. 保存与加载

Save trace 是保存当前性能录制数据，
Load trace 是加载之前保存的性能数据，用于再次分析。

9.2.1. Save trace —— 保存性能追踪数据

当你完成一次性能录制后，可以点击 “Save trace” 按钮将当前的性能分析数据导出为一个 .json 文件。

主要作用：

• 保存当前的性能数据，方便后续分析或对比；
• 可以将文件发送给团队成员或开发者进行远程诊断；
• 适用于记录复杂场景（例如页面加载慢、动画卡顿）以便复盘。

文件内容包含：

• 各时间段的 CPU、内存、FPS 使用情况；
• 调用栈（Stack Trace）信息；
• 网络请求和渲染任务记录等。

9.2.2. Load trace —— 加载性能追踪文件

“Load trace” 用于导入之前保存的 .json 性能文件。

使用方法：
点击 “Load trace” → 选择之前保存的 .json 文件 → Chrome DevTools 会重新加载那次的性能数据。

主要作用：

• 方便对比不同时间或不同版本下的性能表现；
• 便于远程调试或复现线上性能问题；
• 支持离线分析，无需重新录制。

9.3. 勾选框按钮解释

Screenshots（截图）： 在录制性能时，捕获网页的视觉截图序列。可以看到每一帧渲染时页面的视觉变化，帮助分析白屏时间、渲染卡顿、布局抖动等问题。

Memory（内存）：在录制期间同步采集内存使用情况（JS Heap、DOM Nodes 数量等），帮助你判断是否存在内存泄漏（Memory Leak） 或对象未释放问题。

Collect garbage（回收垃圾）：手动触发 GC（Garbage Collection，垃圾回收）。点击后浏览器会立即清理无引用对象的内存，以便分析GC 前后内存变化。

Show ignore list settings dialogue（忽略列表设置）：打开 “忽略文件列表” 设置窗口，可以将某些文件（如第三方库、框架代码）加入忽略列表，在性能火焰图中隐藏，以便你专注分析业务代码的性能。

9.4. 设置的下拉面板按钮解释

注意：

• Enable advanced paint instrumentation (slow) 会显著增加性能数据量，录制过程中浏览器可能略微卡顿；
• Disable JavaScript samples 可以配合高级绘制监控使用，专注于渲染瓶颈；
• Show custom tracks 需要开发者手动在代码里用 Performance.mark 或 Performance.measure 创建自定义轨迹。

9.5. 性能解析

9.5.1. CPU 与 FPS

可以录制一段时间（比如 2-3 秒），录制完成后会生成一个性能面板。
这个面板包含了大量信息，其中上方的曲线图显示 FPS（每秒帧数）和 CPU 占用情况。

• 当图表显示为 红色 时，说明 主线程几乎被当前代码占满，此时用户的其他操作可能响应缓慢，属于 繁忙状态。
• 通过观察颜色和曲线走势，可以快速判断哪些操作或代码片段导致了页面性能瓶颈。

9.5.2. NET

在性能面板中，还有一个 NET 区域，用于表示 网络请求情况。

• 如果页面在录制期间发起了网络请求，这里会显示请求的数量和持续时间（目前没有网络请求，所以看不到什么）；
• 通过观察 NET，可以直观了解网络活动对页面性能的影响。

9.5.3. 每一帧截图

在性能面板上方，被圈出的部分显示了 每一帧的页面截图。

• 你可以将鼠标移动到这些截图上，查看页面在每一帧的渲染情况；
• 这有助于直观分析 动画流畅度、渲染变化 以及页面在特定时刻的状态。

9.5.4. Frames

继续往下可以看到 Frames 面板，它展示了与 绘制帧（Rendering Frames） 相关的信息：

• 每一条条形代表一次绘制操作的耗时；
• 红色 / 黄色条 表示 已发生丢帧，意味着渲染没有跟上显示刷新率；
• 绿色条 表示帧率正常，渲染流畅。

⚠️ 注意观察时不要只看单个条，要串联起来整体分析。
通过上方的截图对比，可以发现大部分时刻已经丢帧，因此页面呈现出明显的卡顿效果

9.5.5. Layout shifts

上方圈出的部分用于展示 布局（Layout）切换的频率。

• 它显示了页面在录制期间 触发布局计算的次数；
• 布局频繁切换通常会导致性能下降和卡顿，因为浏览器需要不断重新计算元素位置和尺寸；
• 通过观察这一部分，可以快速定位哪些操作或代码片段导致频繁重排（Reflow）。

9.5.6. Main

Main 面板主要展示 火焰图（Flame Chart）：

• X 轴 表示时间进度，条形越长说明该事件或任务执行时间越久；
• Y 轴 表示事件调用的层级关系，上下堆叠展示了函数或任务之间的调用顺序；
• 火焰图可以直观分析哪些函数或操作占用了大量时间，从而定位性能瓶颈。

在 火焰图（Flame Chart） 上，鼠标可以移动并滚轮操作，实现 放大和缩小时间轴。放大可以查看更细粒度的事件执行顺序和耗时；缩小可以快速浏览整体任务分布和性能瓶颈趋势。

你还可以 选取自己想要观察的时间范围：在上方的时间轴面板按下鼠标左键，拖动到希望查看的区域，然后松开；这样即可 聚焦分析特定时间段内的性能表现，方便定位问题。

9.5.7. 长任务

如果在 Task（任务）面板 上看到一个 红色小三角，说明该任务属于 长任务（Long Task）。

• 当任务执行时间 超过 50 毫秒 时，就会被视为长任务；
• 长任务会占用大量 CPU 时间，导致浏览器无法及时响应用户操作，属于性能危险状态；
• 识别长任务有助于优化脚本或操作，提升页面流畅度。

在 火焰图（Flame Chart） 上继续放大，可以看到 Layout（布局计算） 的相关任务。

• 选中该 Layout 任务后，下面会出现一个面板，显示 Stack Trace（调用栈） 等详细信息；
• 点击面板中的文件名，可以直接跳转到 Source 面板，告诉你是哪段代码触发了布局计算；
• 这有助于定位 导致重排（Reflow）的具体代码，便于优化页面性能。

9.5.8. Summary

Summary 面板会直观展示页面渲染统计，包括 CPU 使用情况、布局计算、绘制时间和帧率等关键性能指标。

9.5.9. Bottom-Up

Bottom-Up 面板是 从最消耗时间的函数开始向上统计调用链 的一种视图，特点是：

• 按 函数自身耗时（self time） 排序
• 展示 哪些函数最耗 CPU，而不管它们被谁调用
• 帮助快速找出 真正的性能瓶颈函数

简单来说：页面性能问题最直接的罪魁祸首是谁？

• Self Time 高 → 函数内部逻辑耗时长，需要优化
• Total Time 高但 Self Time 低 → 子函数调用耗时多，可以优化子函数

场景：快速找出哪个函数最耗时，查看被多个父函数重复调用的函数

9.5.10. Call Tree

Call Tree（调用树） 是一种 从入口函数开始，按调用层级展开函数执行的视图，它帮助你：

• 看到函数调用的完整路径
• 分析每个函数及其子函数的耗时
• 找出性能瓶颈在调用链的哪个位置

简单来说：页面性能问题是如何发生的？哪些函数调用消耗了时间？

Call Tree 与 Bottom-Up 的对比

举例：一个函数 renderItem() 被多个父函数多次调用

• Call Tree：显示调用路径，耗时分散在父函数下
• Bottom-Up：直接把 renderItem() 排在最上面，显示总耗时

9.5.11. Event Log

Event Log 用来展示：

• 页面中发生的 各种事件
• 包括 浏览器原生事件、JS 定时器事件、网络请求回调 等
• 帮助你了解 事件触发的顺序、执行时间和持续时长

简单来说：页面中都发生了哪些事件？它们是如何被调度和执行的？

使用场景：

• 分析性能问题
  • 某些事件处理函数耗时过长 → 导致页面卡顿
  • Event Log 能显示每个事件的执行时长
• 调试用户交互
  • 点击、滚动等事件触发顺序是否正确
  • 某些事件是否被重复触发

10. Lighthouse

Lighthouse 是 Chrome DevTools 内置的一款自动化网站质量评估工具，用于分析网页的性能、可访问性、最佳实践、SEO 等多个维度。它会对页面进行自动检测并生成一份详细的报告，帮助开发者发现问题和优化方向。

10.1. Performance（性能）

测试网页加载速度与交互性能。

重点指标包括：

• FCP（First Contentful Paint）：首个内容渲染时间。
• LCP（Largest Contentful Paint）：最大内容渲染时间。
• CLS（Cumulative Layout Shift）：布局偏移。
• TTI（Time to Interactive）：可交互时间。
• Speed Index：加载速度指数。

10.2. Accessibility（可访问性）

• 检查网页是否对所有用户（包括残障用户）友好。
• 比如是否使用语义化标签、aria 属性、文字对比度是否合适等。

10.3. Best Practices（最佳实践）

• 检查网页是否遵循安全和现代开发规范。
• 如 HTTPS 使用情况、控制台错误、安全漏洞、图片格式优化等。

10.4. SEO（搜索引擎优化）

• 检查页面是否符合搜索引擎收录标准。
• 包括 <title>、meta description、robots.txt、链接可访问性等。

10.5. Progressive Web App（PWA）

• 检查网页是否具备离线访问、安装到桌面、快速加载等 PWA 特性。