介绍 Chrome 开发者工具（DevTools）的快速入门方法，涵盖打开方式、常用面板（Elements、Console、Sources 等）功能详解及调试技巧。内容包括元素检查、样式修改、移动端模拟、网络请求分析、性能监控及无障碍检测，帮助开发者高效排查问题并优化前端页面。
在前端开发中，Chrome 开发者工具（DevTools） 是我们排查问题、优化性能、理解浏览器行为最强大的助手之一。无论是想快速定位页面样式异常、分析接口请求，还是调试 JavaScript 逻辑，DevTools 都能提供直观高效的方式帮助我们'看清代码背后发生了什么'。
这篇笔记将带你快速入门，从最基本的面板功能到常用调试技巧，让你能在实战中灵活运用它，提升开发效率与问题解决能力。
快捷键：
F12 或 Ctrl + Shift + ICommand + Option + I右键打开：在页面任意元素上右键 → '检查 (Inspect)'
菜单打开：点击右上角 ⋮ → '更多工具' → '开发者工具'
在使用 Chrome 开发者工具时，可以通过 鼠标滚轮 快速调整界面缩放。 只需将鼠标移动到调试面板区域，然后按住 Ctrl（Windows） 或 Command（Mac） 键，同时滚动鼠标滚轮，即可实现 放大 或 缩小 整个调试界面。
macOS：command + shift + P
Windows：ctrl + shift + p
输入快捷键打开菜单栏，搜索 theme 就可以切换 dark 和 light 主题色
Chrome 开发者工具（DevTools）中的 命令面板（Command Menu） 里有四个与截图（Screenshot）相关的命令，很多人其实都没搞清楚它们的区别。
输入 screenshot
'Dock' 决定了 调试面板相对于网页的停靠位置（Docking position），也就是 DevTools 在页面中的摆放方式。
输入 dock
其实也就是类似于这个功能：
在命令面板中输入 'Code'，然后勾选 'Enable code folding' 选项，即可在 Sources 面板 中启用代码折叠功能。这样就能通过点击左侧的小箭头来折叠或展开代码块，方便阅读与定位逻辑结构。
面板 | 功能简介 | 典型用途 |
Elements | 查看 / 修改页面结构和样式 | 实时调整 CSS、查看 DOM |
Console | 执行 JS 代码、查看日志 | 打印调试输出、测试代码片段 |
Sources | 查看 / 设置断点调试 | JS 调试、逐步执行代码 |
Network | 监控请求 / 响应 | 分析接口请求、性能、缓存 |
Application | 查看本地数据 | LocalStorage、Cookie、IndexedDB |
Performance | 性能分析 | 监控加载速度、渲染时间 |
Lighthouse | 页面质量报告 | SEO、性能、可访问性检测 |
Elements 面板 可以 直接看到网页的 DOM 结构、样式规则和渲染状态，并能实时修改、验证效果。
简单来说：Elements 面板 用于查看、编辑和调试网页的 HTML DOM 结构 与 CSS 样式。
它可以：
上面是 DOM 树结构（HTML），下面是 样式区（Styles / Computed）
打开调试面板后，点击左上角的 箭头图标（选择元素模式），然后将鼠标移动到想要检查的元素上。 此时，页面中的元素会被高亮显示，并在其周围出现多层颜色区域。
这些高亮区域代表了元素在页面布局中的不同部分：
通过观察这些颜色区域，你可以非常直观地了解每个元素在页面中的盒模型布局和空间占用情况。
打开调试面板后，点击左上角的 手机与平板图标（Toggle device toolbar），即可进入移动端预览模式。上方工具栏共有五个主要选项：
Save-Data: on 请求头，表示用户希望减少数据使用。开发者可以通过检测 Save-Data 请求头，在网站中提供更轻量化的资源（比如加载低分辨率图片或简化动画）。
在 Elements（元素）面板 中，我们可以通过快捷键快速查找页面中的节点。
按下 Ctrl + F（Windows） 或 Command + F（Mac），下方会出现一个搜索框。
你可以在其中输入：
.header#appdiv、imgChrome 会在页面结构中高亮显示匹配的元素，方便快速定位到目标节点，非常适合在大型 DOM 树中查找特定元素。
CSS Selector（CSS 选择器）是前端最常用的元素定位方式之一，语法和 CSS 选择规则完全一致。搜索时输入这些选择器，Chrome 会自动匹配 DOM 中符合条件的所有节点，并在页面中高亮显示。
查询目标 | 输入语法 | 说明 |
查找所有图片 |
| 直接输入标签名 |
查找类名为 |
| 使用类选择器 |
查找 ID 为 |
| 使用 ID 选择器 |
查找 div 下的 span |
| 使用后代选择器 |
查找具有属性的元素 |
| 使用属性选择器 |
查找第一个列表项 |
| 使用伪类选择器 |
XPath（XML Path Language）是一种用于在 XML/HTML 文档中定位节点的语言，它比 CSS Selector 更灵活，尤其适合结构复杂或动态生成的页面。
查询目标 | XPath 语法 | 说明 |
查找所有 div 元素 |
| 双斜杠表示在文档中查找任意位置的元素 |
查找 ID 为 main 的元素 |
|
|
查找类名为 btn 的元素 |
| 精确匹配 class 属性 |
查找包含某文本的节点 |
| 模糊匹配文本内容 |
查找第一个列表项 |
| 使用括号和索引指定第一个匹配项 |
在 Console（控制台）面板 中，也可以直接通过命令快速定位到页面中的 DOM 元素。 例如输入以下语句：
inspect(document.getElementById('section_one'))
然后按下 Enter，Chrome 会自动切换到 Elements（元素）面板，并高亮显示对应的节点。
这种方式非常适合在控制台中调试脚本时，快速查看某个元素的结构和样式。
在 Elements（元素）面板 中，先选中你想修改的元素，然后在右侧的 element.style 区块直接添加新的 CSS 样式。
.element.style { color: red; background-color: #f5f5f5; }
输入完成后，这些样式会立即生效，并自动以 行内样式（inline style） 的形式应用到元素上。
在 Elements 面板 → Styles（样式） 区域，除了你自己定义的样式外，继续往下滑动
还会看到一些特殊标记：
user agent stylesheet<h1> 标签默认有一定的 margin，这就是浏览器提供的样式。Inherited from xxcolor、font-family）会自动继承父元素的值。::before、::after、:hover。
继续向下滑动，可以看到 图形化盒模型面板，关于 Computed 面板的详细内容将在后续章节中讲解。
在网页中，元素可以在不同状态下呈现不同样式，比如：
:hover：鼠标悬停:active：鼠标按下:focus：获得焦点如果希望在调试时 让这些状态保持常驻，可以按照以下步骤操作：
:hov 按钮，展开伪类选项。:hover、:active 等），元素会立即进入该状态并保持不变。提示：
下面我给大家一段 demo，方便大家调试
比如说在下面的 <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>
class="xxx"。可以直接点击类名编辑或删除。调试代码：
<!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 类，从而实时应用该样式而不影响其他元素，非常方便进行样式调试。
假设你有一个盒子，里面包含多个子元素（items），每个子元素都有同样的类名 item，样式如下：
.item {
padding: 10px;
background-color: #f5f5f5;
margin-bottom: 5px;
}
.item 的 padding，所有具有 .item 类的元素都会同步变化。
使用 :cls 功能
:cls / Add class'（或类似的类控制区域）。效果示例
.item 类，只有这个元素的 padding 被去掉，其他元素保持原有样式不变。
如果你看到网页上某个喜欢的样式，例如 豆瓣绿色按钮，可以通过 Chrome DevTools 快速复制样式：
复制的样式是该元素当前生效的最终样式，包括继承和伪类状态的效果。非常适合快速借鉴网页上的设计，而无需手动查看和编写每条 CSS。
在 Chrome DevTools 中，你可以快速复制页面元素的 HTML 结构：
Copy outerHTML 会复制选中元素及其 子节点的完整 HTML。
如果只想复制 内部内容（不包含当前元素标签），可以选择：Copy → Copy innerHTML
非常适合快速获取网页结构进行调试或复用。
显示最终样式
图形化盒模型（Box Model）
支持快速筛选和搜索
margin、color、font-size。实时修改样式
接着 4.7 章节 的内容，观察 Computed 面板，向下滑动到最底部，会看到 图形化盒模型（Box Model）面板，它可以直观展示元素在页面中的布局空间，包括内容区域、内边距、边框和外边距。
0可以看到 padding 上下是 15，左右是 20，boder 是 0 等
图形化面板会用不同颜色高亮显示这些区域（Content / Padding / Border / Margin），便于快速理解元素在页面中的实际占位和布局关系。
小提示：
假设你选中一个元素，想查看它的 背景颜色，可以在 Computed 面板 上方的 搜索输入框 输入 background 或相关属性名。搜索后，点击旁边的 蓝色小按钮，DevTools 会快速跳转到该样式 在 CSS 文件或 Styles 面板中的定义位置，方便查看和调试。
在 Computed 面板 或相关调试区域中，Rendered Fonts 显示了元素当前实际使用的 字体（font-family） 信息，包括浏览器最终渲染时选择的字体。 这个功能可以帮助你快速确认字体是否正确生效。
在 Computed 面板 中，顶部有两个实用选项，可以帮助你更高效地查看元素样式：
总结：
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，页面上会出现一层带有数字标识的网格线。 这些数字表示网格的 行列编号：
通过这些数字标识，我们可以直观地了解每个网格单元在布局中的具体位置，从而更方便地调试 Grid 布局 的行列分布与对齐方式。
注意：如果你用的是普通 grid（没命名），那 Show line names 自然不会有任何显示，这是正常的。
在 Layout 面板中，除了 Grid 以外，下面还有 Flexbox 区域。
这里会自动列出页面中所有使用了 display: flex 的容器。
通过勾选对应的选项，可以直观地查看 Flex 布局的方向、对齐方式、间距分布等信息。 例如，你可以选择：
justify-content、align-items、gap 等属性的实际效果。这些可视化选项能帮助我们快速理解布局在不同对齐或伸缩规则下的表现，非常适合排查 Flex 项不对齐、间距异常等问题。
当页面中的元素使用了 Grid（网格布局）或 Flexbox（弹性盒布局）时，Chrome 会在元素右侧自动显示一个小标签（例如 grid 或 flex）。
点击这个标签即可快速切换布局辅助线的显示状态：
这种方式无需手动进入 Layout 面板，非常方便在页面中直接可视化布局结构，特别适合在调试复杂嵌套布局或快速比对多个容器时使用。
除了 Layout 面板，在 Styles 面板中也可以直接调试布局。 当选中使用了 Flexbox 或 Grid 的元素时， 在 CSS 样式规则旁边会出现一个小图标（通常是一个格子或箭头标识）：
这种方式无需切换到 Layout 面板，就能在 Style 面板中快速可视化布局结构，方便在修改 CSS 时即时查看效果。
Event Listeners 是 Chrome DevTools 中专门用来 查看和调试 DOM 元素绑定的事件 的面板。 它可以帮助你快速找出某个元素上注册了哪些事件，以及事件的回调函数位置，从而方便调试交互逻辑。
click、mouseover、keydown 等）进行分类显示。可以选择查看事件绑定在：
Selected Node（当前选中节点）
Ancestors（父级节点上的事件，冒泡捕获阶段）
All Nodes（页面中所有节点上的事件）
调试代码：
<!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 事件。
点击 事件旁边的删除图标，即可移除该事件监听器。删除后，再次点击该元素，原来的回调函数就不会被执行了。
这种方式非常方便调试事件逻辑，尤其适合排查 事件冲突或无效事件 的问题。
Properties 面板用于查看 选中 DOM 元素的所有属性和方法，包括原生属性、事件、原型链等。 它不仅显示 HTML 属性，也可以查看 JavaScript 绑定在该元素上的属性。
id、class、value）和 DOM 内部属性（如 _value、_checked 等）。appendChild、getAttribute 等）。Accessibility 面板是 Chrome DevTools 中用于 检查网页无障碍（A11y）信息 的工具。 它可以帮助开发者了解页面元素如何被 屏幕阅读器、键盘导航或辅助技术 识别，确保网站符合无障碍标准。
role、aria-* 属性、标签文本、可见性、可交互状态等。aria-label、role 不明确或不可交互的问题。如果某个元素没有在辅助功能树中显示，说明屏幕阅读器可能无法识别它，通常需要添加可访问属性或调整 HTML 结构。
对于动态更新的内容（如弹窗、模态框），可以结合 Accessibility 面板和 ARIA live regions 测试内容是否被实时朗读。
Console 面板是 DevTools 中用于 查看日志、执行 JavaScript 代码以及调试脚本 的核心工具。 它不仅可以显示网页运行时的错误信息，也可以直接执行 JS 代码，方便快速测试和调试。
在 Console 面板中输入例如： let a = 1
undefined。也就是说，右箭头标识输入，左箭头标识执行结果或返回值。
$_ 是 Chrome Console 中的一个 快捷变量，用于 访问最近一次表达式的结果。
它可以让你无需重新输入变量或表达式，就能直接引用上一次执行的返回值。
在 Console 中输入一条语句，例如： 2 + 3，执行后，Console 会显示返回值 5。然后输入 $_ ，Console 会返回上一次表达式的结果，即 5。
注意：
$_ 仅指向 上一条执行的返回值，连续使用时会不断更新为最新结果。let a = 1），$_ 的值为 undefined。在 Chrome DevTools Console 中，有一些 快捷变量 用于快速引用最近选中的 DOM 元素：
变量 | 含义 |
| 当前在 Elements 面板选中的 DOM 元素 |
| 上一次选中的 DOM 元素 |
| 再上一次选中的 DOM 元素 |
| 再再上一次选中的 DOM 元素 |
| 再再再上一次选中的 DOM 元素 |
<div>。$0，返回当前选中的 DOM 元素。$1、$2 来引用之前选中的元素。注意：
$0 会随着你在 Elements 面板的选择不断更新。$1、$2 等保存的是 历史选中元素，最长可追溯到 $4。Chrome DevTools 的 Console 提供了丰富的方法，用于 输出信息、调试、分组、计时和追踪。下面是常用方法的介绍：
输出普通信息或者变量值
console.log('Hello, World!');
console.log('Value of a:', a);
输出错误信息，通常显示为红色，便于区分
console.error('Something went wrong!');
输出警告信息，通常为黄色
console.warn('This is a warning!');
以表格形式展示数组或对象，便于对比和查看数据结构。
const users = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}];
console.table(users);
清空 Console 面板所有输出
console.clear();
将日志分组，方便查看层级结构。
console.group('User Info');
console.log('Name: Alice');
console.log('Age: 25');
console.groupEnd();
记时，用于性能测试。
console.time('LoopTime');
for(let i=0;i<100000;i++){}
console.timeEnd('LoopTime'); // 输出耗时
断言，如果条件为 false，则输出错误信息。
console.assert(a > 10, 'a must be greater than 10');
显示代码执行路径（堆栈跟踪），帮助定位调用来源。
function foo() {
function bar() {
console.trace('Trace here');
}
bar();
}
foo();
在 Console 面板顶部，可以通过 Log 级别筛选 来控制显示哪些类型的日志：
console.log() 等普通日志输出；console.warn() 的警告信息；console.error() 的错误信息；console.debug() 的调试输出
小眼睛用于 实时监视变量或表达式的值变化。 无论你在 Console、Sources 断点调试、还是脚本运行过程中，小眼睛都能动态更新这些值。
调试代码：
let count = 0;
setInterval(() => { count++; }, 1000);
直接在控制台观察 count 的值时，系统会实时显示并更新它的变化，不再需要手动调用 console.log()。
注意：
总结：小眼睛就是你的'变量监控面板'，能让你在调试时实时观察任何值的变化，而无需频繁写 console.log()。
这些按钮是 Source 面板中进行代码调试（debugger）时的核心工具，主要用来控制代码在断点处的执行流程。
当页面的 JavaScript 代码正在运行时，点击该按钮会立即暂停所有脚本的执行。
页面会冻结在当前的执行点，方便你查看此时的变量值、调用栈等信息。
场景示例：
比如页面卡住或执行了错误逻辑，可以点击此按钮强制暂停，查看当前代码状态。
执行下一行代码。
如果下一行是函数调用，不进入函数内部，而是直接执行整个函数后返回结果。
场景示例：
'Step over' 就是'跨过去'，跨过函数体内部。
function add(a, b) { return a + b; }
let result = add(2, 3); // 当前断点在这里
console.log(result);
点击 'Step over' → 不会进入 add() 内部，而是直接执行完并返回 5。
执行下一行代码。
如果这一行是函数调用，则进入函数内部，从函数第一行开始逐步调试。
场景示例：
'Step into' 就是'走进去'，进入函数体内部。
从当前函数内部直接执行到函数结束位置并返回上一层调用点。
常用于你已经在函数内部调试完毕，想返回主逻辑的情况。
场景示例：
'Step out' 就是'跳出去'。
让脚本从当前断点处继续运行，直到遇到下一个断点或者脚本执行结束。
场景示例：
在多个断点之间快速跳转时非常常用。
'Deactivate breakpoints' 的意思是：临时关闭（禁用）所有断点，但不会删除它们。
也就是说，你设置的所有断点（包括行断点、DOM 断点、事件断点等）仍然保留，只是暂时不生效
场景示例：
当你想让脚本继续执行，不受断点打断时，可以点击它。点击后断点图标会变灰，Chrome 不会在任何断点处暂停。你可以再次点击启用断点，之前的断点会恢复原状。
function sayHi() { console.log("Hi"); }
function sayBye() { console.log("Bye"); }
sayHi(); // 断点 1
sayBye(); // 断点 2
按钮名称 | 图标含义 | 操作结果 | 使用场景 |
🟡 Pause script execution | ⏸️ 暂停 | 暂停当前执行的脚本 | 强制中断代码执行 |
🟢 Step over next function call | ⤴️ 跳过函数 | 执行当前行，不进入函数内部 | 快速跳过简单函数 |
🔵 Step into next function call | ⬇️ 进入函数 | 进入函数内部调试 | 想看函数内部逻辑 |
🟣 Step out of current function | ⬆️ 跳出函数 | 执行完当前函数返回上层 | 结束当前函数调试 |
🟠 Resume script execution (Step) | ▶️ 继续执行 | 从当前断点继续执行 | 跳到下一个断点或结束 |
Deactivate breakpoints | ⛔ 暂时禁用所有断点，不删除只禁用 | 禁用断点 | 让脚本继续执行，不受断点打断 |
在掌握了 Chrome 调试工具的基础操作之后，我们可以进一步学习 JavaScript 调试。 调试是前端开发中非常重要的一环，它能帮助我们快速定位问题、分析代码执行过程。
在实际开发中，最常用的调试手段之一就是使用 **debugger**。
下面我们来看一看 debugger 的两种使用方法，以及它们在调试中的应用场景。
这是最直接、最常用的一种方式。
使用方法：在代码中插入一行 debugger;，当程序执行到这一行时，浏览器会自动暂停执行，并切换到 Sources 面板。
这是更灵活的调试方式，适合你不想改动源码时使用。
使用方法：
方法 | 使用场景 | 是否修改代码 | 触发时机 |
| 临时调试、快速插入 | 需要修改源码 | 执行到语句时 |
手动断点 | 长期调试或不便改代码时 | 不修改源码 | 命中断点时 |
点击右侧的 加号（＋），即可在 Watch 面板 中添加需要监听的属性或变量。
当代码运行后，只要该变量有了值或发生变化，Watch 区域就会实时显示并更新其当前值。
例如，如果代码中存在一个变量 color，在 Watch 面板中添加 color 后，就能动态监控它的值变化。
在 Elements 面板 → Break on...（中断点调试） 有一个重要功能，用于在 DOM 结构发生变化时自动暂停代码执行，帮助我们快速定位修改来源。
class、id、style、src 等）被修改时，自动中断执行。调试代码：
<!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 id="box">
<div>原始元素</div>
</div>
<button id="add">添加子节点</button>
<button id="attr">修改属性</button>
<button id="remove">删除节点</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) 这一行代码。
这就说明正是这段代码修改了该元素的子节点结构。
在 Sources 面板 → Event Listener Breakpoints 区域，你可以看到一系列按类别分组的事件类型（如鼠标、键盘、定时器、DOM 变化等）。 只需勾选某个事件类型，当该事件被触发时，调试器就会自动暂停在对应的 JavaScript 代码处。
分类 | 示例事件 | 说明 |
Mouse |
| 鼠标相关事件 |
Keyboard |
| 键盘输入事件 |
Control |
| 浏览器或元素控制事件 |
DOM Mutation |
| DOM 结构变化事件 |
XHR /Fetch |
| 网络请求相关事件 |
Timer |
| 定时器相关事件 |
有时候我们的代码是写在框架（例如 Vue）中，当我们在 Event Listener Breakpoints 中勾选了 click 并点击按钮时，调试器可能会跳转到 Vue 的内部源码文件，而不是我们自己的业务代码。
其实，这种情况下我们并不需要调试框架的源码，只想关注自己的逻辑。 这时可以在右侧的 Call Stack（调用栈） 面板中，找到对应的框架脚本，右键选择 'Add script to ignore list'（添加到忽略列表）。
这样做之后，调试器就会自动忽略框架文件，在触发事件时直接定位到你自己的业务代码，调试过程会更加清晰高效。
Network 面板字段说明： 在 Network 面板中，每一条请求都会展示详细的信息。下面是常见字段的含义：
document、script、xhr、image 等，表示请求的文件类型。index 表示是由 index 文件触发的请求。在 Network 面板中，你可以通过右键点击表头来自由定制显示的字段。 在弹出的菜单中，勾选或取消勾选对应选项，即可添加或删除列，比如是否显示 Protocol、Priority、Cookies、Connection ID 等信息。 这可以帮助你根据调试需求，只保留对当前分析最有用的字段，让界面更简洁高效。
Record network log（记录网络日志）
Stop network log（停止记录网络日志）
简单来说，当按钮为灰色状态时，表示 已暂停监听网络请求，新的请求不会被记录； 当按钮为红色状态时，表示 正在监听网络请求，此时所有网络活动都会被实时捕获并显示在 Network 面板中。
在 Network 面板 中，红色圆点旁边有一个 '清空'图标（🚫），它的作用是：
点击 Clear network log 按钮后，会立即清除当前所有已捕获的网络请求记录，让面板恢复为空白状态。
在 Network 面板 的过滤栏中，你可以根据请求类型快速筛选需要查看的网络请求：
XMLHttpRequest 或 fetch() 发送的请求）。此外，在右上角还有一个搜索框 Filter，可用于查找特定请求——可以输入 URL、参数名、响应内容关键字 等信息，快速定位所需请求，方便进行精准分析。
默认情况下，当你在 Network 面板 中刷新页面时，之前捕获的所有请求记录都会被清空。
启用 Preserve log（保留日志）选项后，Chrome 会在页面刷新或跳转后仍然保留之前的网络请求记录，不会被自动清除。
在 Network 面板 中，勾选 Disable cache 后，Chrome 会在页面刷新或发起请求时忽略浏览器缓存，每次都会从服务器重新获取资源，而不会使用本地缓存的文件。
注意：
在 Network 面板 中，Throttling 功能可以模拟不同网络环境，以便观察网页在各种网络速度下的加载表现和性能问题。
在 More network conditions 中，除了之前介绍的 Caching（缓存） 和 Network（节流器） 外，还包括两个重要设置：
gzip、deflate、br），确保服务器返回的数据浏览器可以正确解析。
例如，当在 User Agent 中选择 Firefox—Windows 并发起请求时，Network 面板的 Request Headers 中就会显示我们模拟的 User-Agent，表明浏览器已经以 Firefox 的身份向服务器发送请求，从而可以测试不同浏览器下的页面或接口表现。
Network → Export HAR，可以将当前捕获的所有网络请求导出为 HAR 文件。可以用于离线请求分析、性能报告共享、问题复现和调试。
Network → Import HAR，可以加载之前保存的 HAR 文件到 DevTools 中。DevTools 会以与实际抓包相同的方式显示请求信息，便于分析历史网络数据，而无需再次访问页面。
Chrome DevTools 中的 Application 面板 用于查看和管理网页在浏览器端存储的数据、缓存资源以及相关应用信息。它主要涉及 存储、缓存、服务端信息和安全相关内容，是前端开发和调试中非常重要的工具。
以下是核心模块介绍：
例如在 Console 面板 中执行：document.cookie = "username=zhangsan" 然后切换到 Application 面板 → Cookies，就能看到刚刚设置的 username=zhangsan Cookie 已经被成功写入。
Performance 面板用于记录并分析页面的运行过程（加载与交互），帮助你找出性能瓶颈：JS 卡顿、长任务、布局/重绘开销、网络阻塞、渲染帧率丢失、以及影响用户体验的关键指标（如 FCP、LCP、CLS、TBT/INP 等）。
这个网站（https://googlechrome.github.io/devtools-samples/jank/）是由 Google 开发者提供的一个性能测试示例页面。 点击 '增加' 按钮后，页面会不断生成大量元素，随着数量的增加，渲染与计算压力逐渐上升，页面的性能也会明显下降，出现卡顿。 而点击 '优化' 按钮后，可以看到页面运行变得流畅许多，清晰展示了性能优化前后的对比效果
开始捕获网页的性能数据（CPU、JS、渲染、内存等）。
流程：
结果：
常用于定位：页面卡顿、渲染慢、脚本执行耗时。
在 页面加载的同时自动开始性能录制，用于分析页面加载性能。
流程：
特点：
DOMContentLoaded、Load 事件开始到首屏渲染全过程；**适用场景：**首屏加载慢；想优化白屏时间；想了解哪些脚本阻塞了渲染。
清除当前面板中已录制的性能数据。
用途：
点击效果：
功能名称 | 作用说明 | 使用场景 |
Record | 手动开始录制性能数据 | 用户交互、动画、特定操作性能分析 |
Record and Reload | 自动刷新并从加载开始录制 | 页面首屏加载性能分析 |
Clear | 清除现有记录 | 准备重新采样或对比多组数据时 |
Save trace 是保存当前性能录制数据， Load trace 是加载之前保存的性能数据，用于再次分析。
当你完成一次性能录制后，可以点击 'Save trace' 按钮将当前的性能分析数据导出为一个 .json 文件。
主要作用：
文件内容包含：
'Load trace' 用于导入之前保存的 .json 性能文件。
使用方法：
点击 'Load trace' → 选择之前保存的 .json 文件 → Chrome DevTools 会重新加载那次的性能数据。
主要作用：
Screenshots（截图）： 在录制性能时，捕获网页的视觉截图序列。可以看到每一帧渲染时页面的视觉变化，帮助分析白屏时间、渲染卡顿、布局抖动等问题。
Memory（内存）：在录制期间同步采集内存使用情况（JS Heap、DOM Nodes 数量等），帮助你判断是否存在内存泄漏（Memory Leak） 或对象未释放问题。
Collect garbage（回收垃圾）：手动触发 GC（Garbage Collection，垃圾回收）。点击后浏览器会立即清理无引用对象的内存，以便分析GC 前后内存变化。
Show ignore list settings dialogue（忽略列表设置）：打开 '忽略文件列表' 设置窗口，可以将某些文件（如第三方库、框架代码）加入忽略列表，在性能火焰图中隐藏，以便你专注分析业务代码的性能。
功能 | 作用 | 常用场景 |
Screenshots | 捕获网页渲染截图 | 分析白屏、动画流畅度 |
Memory | 记录内存使用变化 | 查找内存泄漏 |
Collect garbage | 手动触发 GC | 对比 GC 前后内存占用 |
Show ignore list settings | 设置忽略文件 | 过滤无关代码、专注业务性能 |
功能名称 | 功能说明 | 使用场景 / 注意事项 |
Enable advanced paint instrumentation (slow) | 启用高级绘制监控，记录每一个绘制操作（paint） 的详细信息。勾选后性能采样更详细，但录制速度会变慢。 | 分析页面复杂渲染、重绘、样式变化导致的性能瓶颈。 |
Disable JavaScript samples | 禁用 JS 样本采集，不会记录 JS 函数执行的火焰图。 | 如果你只想分析布局/渲染性能，而不关心 JS 执行细节时使用，可加快采样速度。 |
Show custom tracks | 显示自定义轨迹（Custom Tracks），用于开发者通过 API 自行标记性能事件或指标。 | 用于可视化自己定义的事件，比如组件渲染时间、异步任务耗时等。 |
注意：
Performance.mark 或 Performance.measure 创建自定义轨迹。
可以录制一段时间（比如 2-3 秒），录制完成后会生成一个性能面板。 这个面板包含了大量信息，其中上方的曲线图显示 FPS（每秒帧数）和 CPU 占用情况。
在性能面板中，还有一个 NET 区域，用于表示 网络请求情况。
在性能面板上方，被圈出的部分显示了 每一帧的页面截图。
继续往下可以看到 Frames 面板，它展示了与 绘制帧（Rendering Frames） 相关的信息：
⚠️ 注意观察时不要只看单个条，要串联起来整体分析。 通过上方的截图对比，可以发现大部分时刻已经丢帧，因此页面呈现出明显的卡顿效果
上方圈出的部分用于展示 布局（Layout）切换的频率。
Main 面板主要展示 火焰图（Flame Chart）：
在 火焰图（Flame Chart） 上，鼠标可以移动并滚轮操作，实现 放大和缩小时间轴。放大可以查看更细粒度的事件执行顺序和耗时；缩小可以快速浏览整体任务分布和性能瓶颈趋势。
你还可以 选取自己想要观察的时间范围：在上方的时间轴面板按下鼠标左键，拖动到希望查看的区域，然后松开；这样即可 聚焦分析特定时间段内的性能表现，方便定位问题。
如果在 Task（任务）面板 上看到一个 红色小三角，说明该任务属于 长任务（Long Task）。
在 火焰图（Flame Chart） 上继续放大，可以看到 Layout（布局计算） 的相关任务。
Summary 面板会直观展示页面渲染统计，包括 CPU 使用情况、布局计算、绘制时间和帧率等关键性能指标。
Bottom-Up 面板是 从最消耗时间的函数开始向上统计调用链 的一种视图，特点是：
简单来说：页面性能问题最直接的罪魁祸首是谁？
**场景：**快速找出哪个函数最耗时，查看被多个父函数重复调用的函数
Call Tree（调用树） 是一种 从入口函数开始，按调用层级展开函数执行的视图，它帮助你：
简单来说：页面性能问题是如何发生的？哪些函数调用消耗了时间？
Call Tree 与 Bottom-Up 的对比
视图 | 排序方式 | 适用场景 |
Call Tree (Top-Down) | 从入口函数展开调用链 | 分析调用路径，找出整个函数调用流程中的瓶颈 |
Bottom-Up | 按函数自身耗时排序 | 快速找到最耗时的函数，不关心它被谁调用 |
举例：一个函数 renderItem() 被多个父函数多次调用
renderItem() 排在最上面，显示总耗时Event Log 用来展示：
简单来说：页面中都发生了哪些事件？它们是如何被调度和执行的？
使用场景：
Lighthouse 是 Chrome DevTools 内置的一款自动化网站质量评估工具，用于分析网页的性能、可访问性、最佳实践、SEO 等多个维度。它会对页面进行自动检测并生成一份详细的报告，帮助开发者发现问题和优化方向。
测试网页加载速度与交互性能。
重点指标包括：
<title>、meta description、robots.txt、链接可访问性等。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online