跳到主要内容Chrome 开发者工具 DevTools 快速入门 | 极客日志HTML / CSS大前端
Chrome 开发者工具 DevTools 快速入门
Chrome 开发者工具（DevTools）的核心功能与使用方法，涵盖 Elements、Console、Sources、Network、Application、Performance 及 Lighthouse 面板。内容包括元素检查、样式调试、断点设置、网络请求分析、本地存储管理及性能优化等实战技巧，帮助开发者高效排查问题并提升网页性能。
云间漫步45 浏览 1. 打开方式与放大缩小
- 快捷键：
- Windows/Linux：
F12 或 Ctrl + Shift + I
- macOS：
Command + Option + I
- 右键打开：在页面任意元素上右键 → 检查 (Inspect)
- 菜单打开：点击右上角
⋮ → '更多工具' → '开发者工具'
在使用 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' 决定了 调试面板相对于网页的停靠位置。
输入 dock
- Dock to bottom：停靠底部
- Dock to right：停靠右侧
- Dock to left：停靠左侧
- Undock into separate window：独立窗口显示
其实也就是类似于这个功能：
2.5. 折叠代码
在命令面板中输入 'Code'，然后勾选 'Enable code folding' 选项，即可在 Sources 面板 中启用代码折叠功能。
3. 常用面板介绍
| 面板 | 功能简介 | 典型用途 |
|---|
| Elements | 查看 / 修改页面结构和样式 | 实时调整 CSS、查看 DOM |
| Console | 执行 JS 代码、查看日志 | 打印调试输出、测试代码片段 |
| Sources | 查看 / 设置断点调试 | JS 调试、逐步执行代码 |
| Network | 监控请求 / 响应 | 分析接口请求、性能、缓存 |
| Application | 查看本地数据 | LocalStorage、Cookie、IndexedDB |
| Performance | 性能分析 | 监控加载速度、渲染时间 |
| Lighthouse | 页面质量报告 | SEO、性能、可访问性检测 |
4. Elements
4.1. 什么是 Elements
Elements 面板 可以 直接看到网页的 DOM 结构、样式规则和渲染状态，并能实时修改、验证效果。
- 实时检查网页结构
- 直接修改 HTML/CSS
- 调试样式覆盖问题
- 分析盒模型布局
- 查看事件绑定和伪类状态
4.2. 界面结构
上面是 DOM 树结构（HTML），下面是 样式区（Styles / Computed）
4.3. 检查元素
打开调试面板后，点击左上角的 箭头图标（选择元素模式），然后将鼠标移动到想要检查的元素上。
- 🩵 淡蓝色：表示元素本身（content + padding + border）所占的空间。
- 🟧 淡橙色：表示 margin（外边距）。
- 💚 淡绿色：表示 padding（内边距）。
通过观察这些颜色区域，你可以非常直观地了解每个元素在页面中的盒模型布局和空间占用情况。
4.4. 切换移动端
打开调试面板后，点击左上角的 手机与平板图标（Toggle device toolbar），即可进入移动端预览模式。
- Dimensions（设备尺寸）：用于选择设备型号或自定义视口大小。
- 百分比（Zoom）：用于放大或缩小视图。
- Network conditions（网络条件）：模拟不同的网络环境，比如 Fast 3G、Slow 3G、Offline。
- Save-Data: default / on / off（节省数据模式）：模拟浏览器是否开启了'节省数据模式'。
- Rotate（旋转）：快速切换 横屏 / 竖屏 模式。
4.5. 查询 DOM 节点
在 Elements（元素）面板 中，我们可以通过快捷键快速查找页面中的节点。
4.5.1. 使用 CSS Selector 查询
| 查询目标 | 输入语法 | 说明 |
| 查找所有图片 | img | 直接输入标签名 |
查找类名为 btn 的元素 | .btn | 使用类选择器 |
查找 ID 为 main 的元素 | #main | 使用 ID 选择器 |
| 查找 div 下的 span | div span | 使用后代选择器 |
| 查找具有属性的元素 | input[type="text"] | 使用属性选择器 |
| 查找第一个列表项 | li:first-child | 使用伪类选择器 |
4.5.2. 使用 XPath 查询
| 查询目标 | XPath 语法 | 说明 |
| 查找所有 div 元素 | //div | 双斜杠表示在文档中查找任意位置的元素 |
| 查找 ID 为 main 的元素 | //*[@id="main"] | * 表示任意标签 |
| 查找类名为 btn 的元素 | //*[@class="btn"] | 精确匹配 class 属性 |
| 查找包含某文本的节点 | //*[contains(text(), "登录")] | 模糊匹配文本内容 |
| 查找第一个列表项 | (//li)[1] | 使用括号和索引指定第一个匹配项 |
4.5.3. 通过 console 面板定位
在 Console（控制台）面板 中，也可以直接通过命令快速定位到页面中的 DOM 元素。
inspect(document.getElementById('section_one'))
4.6. 编辑样式
在 Elements（元素）面板 中，先选中你想修改的元素，然后在右侧的 element.style 区块直接添加新的 CSS 样式。
color: red; background-color: #f5f5f5;
在 Elements 面板 → Styles（样式） 区域，还会看到一些特殊标记：
user agent stylesheet：浏览器默认样式。Inherited from xx：从父元素继承的样式。- Pseudo：伪元素或伪类的样式。
4.7. 伪类状态调试/常驻（:hover / :active / :focus 等）
如果希望在调试时 让这些状态保持常驻，可以按照以下步骤操作：
- 在 Elements（元素）面板 中选中目标元素。
- 点击右上角的
:hov 按钮，展开伪类选项。
- 勾选你想固定的状态（如
:hover、:active 等）。
<!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-btn { background-color: #3498db; color: white; border: none; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s; }
.hover-btn:hover { background-color: #2c80b4; }
.active-btn { background-color: #e74c3c; color: white; border: none; padding: 10px 20px; cursor: pointer; transition: background-color 0.1s; }
.active-btn:active { background-color: #c0392b; }
.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-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-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-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）调试相关功能
- **查看类名：**在 Elements 面板中，选中某个元素，在 DOM 树上方可以看到
class="xxx"。
- 添加 / 删除类：在右侧 Elements → Styles → .cls 输入框中，有时会看到 '+ Add class'。
- **切换类名：**DevTools 支持快速勾选 / 取消已有类，模拟类的开启或关闭状态。
4.8.1. 添加/删除类名
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<style>
.bg { background-color: red; width: 200px; }
.color { color: white; }
</style>
</head>
<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 类的元素都会同步变化。
- 这时如果只想修改 某一个特定元素 的样式，直接修改类会影响到其他元素。
- 在 Elements 面板 中选中你想单独调试的元素。
- 找到右侧 Styles 面板 上方的
:cls / Add class（或类似的类控制区域）。
- 勾选或取消某个 class 的状态，Chrome 会 只对选中的元素生效。
- 取消了某个 item 的
.item 类，只有这个元素的 padding 被去掉，其他元素保持原有样式不变。
4.9. 复制样式与 HTML 结构
4.9.1. 复制样式
- 在 Elements 面板 中选中目标元素。
- 将鼠标悬停在元素的 类名 上，右键选择：Copy → Copy styles。
- 然后将复制的 CSS 粘贴到自己的代码中即可。
4.9.2. 复制 HTML 结构
- 打开 Elements（元素）面板，选中你想复制的节点。
- 右键点击选中的元素，在弹出菜单中选择：Copy → Copy outerHTML。
- 然后将复制的 HTML 粘贴到自己的代码中即可。
Copy outerHTML 会复制选中元素及其 子节点的完整 HTML。
4.10. 图形化面板（Computed）
4.10.1. Computed 的主要特点
- 显示最终样式：列出元素所有实际生效的 CSS 属性和值。
- 图形化盒模型（Box Model）：直观展示 Content、Padding、Border、Margin。
- 支持快速筛选和搜索：可以在顶部搜索框中输入属性名快速定位。
- 实时修改样式：点击数值可以直接编辑 padding、margin、width、height 等。
4.10.2. 观察布局空间
接着 4.7 章节 的内容，观察 Computed 面板，向下滑动到最底部，会看到 图形化盒模型（Box Model）面板。
- 元素本体（Content）：显示元素内容区域占用的空间
- Padding（内边距）：元素内容与边框之间的距离
- Border（边框）：元素边框厚度
- Margin（外边距）：元素与外部其他元素之间的间距
4.10.3. 快速查询与搜索
假设你选中一个元素，想查看它的 背景颜色，可以在 Computed 面板 上方的 搜索输入框 输入 background 或相关属性名。
在 Computed 面板 或相关调试区域中，Rendered Fonts 显示了元素当前实际使用的 字体（font-family） 信息。
4.10.4. Computed 面板功能：Show all 与 Group
- Show all：勾选后，会显示元素的 所有 CSS 属性（包括未生效或被覆盖的属性）。
- Group：将样式按 类型分组，如 Box Model、Text、Background 等。
4.11. 布局面板（Layout）
Layout 面板主要分为两个部分：Grid 和 Flexbox。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Layout 面板学习 Demo</title>
<style>
.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-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，页面上会出现一层带有数字标识的网格线。
- Show line numbers：显示数字编号（1, 2, 3...）
- Show line names：显示命名的线（如 col-start, row-end）
- Hide line labels：隐藏所有标签
- Show track sizes：显示每行/列的尺寸
- Show area names：在格子中显示 header / sidebar / main / footer
- Extend grid lines：网格线延伸到页面外
在 Layout 面板中，除了 Grid 以外，下面还有 Flexbox 区域。
当页面中的元素使用了 Grid 或 Flexbox 时，Chrome 会在元素右侧自动显示一个小标签（例如 grid 或 flex）。
除了 Layout 面板，在 Styles 面板中也可以直接调试布局。
4.12. 绑定事件面板（Event listenters）
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 面板中，选中某个元素后，可以看到该元素绑定的所有事件。
4.13. Properties 面板
Properties 面板用于查看 选中 DOM 元素的所有属性和方法，包括原生属性、事件、原型链等。
4.13.1. 主要功能
- 查看元素的所有属性：包括标准 HTML 属性和 DOM 内部属性。
- 查看事件绑定情况：会列出元素绑定的事件。
- 查看原型链（Prototype）：展示元素继承的原型对象。
- 调试 JavaScript 对象属性：不仅限于 DOM 元素，console 输出的 JS 对象也可以用 Properties 面板查看。
4.13.2. 使用场景
- 查看 DOM 属性值：快速确认 input、checkbox、select 等元素当前状态。
- 调试事件和自定义属性：检查 JS 动态绑定在元素上的数据。
- 查看对象原型链：分析对象继承、方法调用情况。
4.14. Accessibility
Accessibility 面板是 Chrome DevTools 中用于 检查网页无障碍（A11y）信息 的工具。
- 查看元素的无障碍属性：包括
role、aria-* 属性、标签文本、可见性、可交互状态等。
- 树状结构展示：Accessibility 面板会显示当前元素在 Accessibility Tree（辅助功能树） 中的位置。
- 属性与状态：名称（Name）、角色（Role）、状态（State）。
- 调试辅助功能问题：能快速定位元素缺少
aria-label、role 不明确或不可交互的问题。
5. Console（控制台）
Console 面板是 DevTools 中用于 查看日志、执行 JavaScript 代码以及调试脚本 的核心工具。
5.1. 执行 JavaScript 代码
5.1.1. 执行语句
在 Console 面板中输入例如： let a = 1
- 指向右边的箭头（>）表示这是你输入的代码。
- 指向左边的箭头（<）表示该语句的 返回值。
5.1.2. $_
$_ 是 Chrome Console 中的一个 快捷变量，用于 访问最近一次表达式的结果。
在 Console 中输入一条语句，例如： 2 + 3，执行后，Console 会显示返回值 5。 然后输入 $_ ，Console 会返回上一次表达式的结果，即 5。
5.1.3. $0 快捷变量
在 Chrome DevTools Console 中，有一些 快捷变量 用于快速引用最近选中的 DOM 元素：
| 变量 | 含义 |
|---|
$0 | 当前在 Elements 面板选中的 DOM 元素 |
$1 | 上一次选中的 DOM 元素 |
$2 | 再上一次选中的 DOM 元素 |
$3 | 再再上一次选中的 DOM 元素 |
$4 | 再再再上一次选中的 DOM 元素 |
- 在 Elements 面板中选中某个元素，例如一个
<div>。
- 切换到 Console 面板，输入：
$0，返回当前选中的 DOM 元素。
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.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()
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：默认情况下，所有日志类型都会显示。
- 取消勾选 Info：会隐藏
console.log() 等普通日志输出。
- 取消勾选 Warnings：会隐藏
console.warn() 的警告信息。
- 取消勾选 Errors：会隐藏
console.error() 的错误信息。
- 取消勾选 Verbose：会隐藏
console.debug() 的调试输出
5.4. 监视变量（Watch Expressions）
let count = 0;
setInterval(() => { count++; }, 1000);
直接在控制台观察 count 的值时，系统会实时显示并更新它的变化。
- Watch 支持任意 JavaScript 表达式。
6. Sources
6.1. 按键含义
这些按钮是 Source 面板中进行代码调试（debugger）时的核心工具。
6.1.1. ⏸️ Pause script execution（暂停脚本执行）
当页面的 JavaScript 代码正在运行时，点击该按钮会立即暂停所有脚本的执行。
6.1.2. ⤴️ Step over next function call（跳过函数调用）
执行下一行代码。如果下一行是函数调用，不进入函数内部。
6.1.3. ⬇️ Step into next function call（进入函数调用）
执行下一行代码。如果这一行是函数调用，则进入函数内部。
6.1.4. ⬆️ Step out of current function（跳出当前函数）
从当前函数内部直接执行到函数结束位置并返回上一层调用点。
6.1.5. ▶️ Step（继续执行到下一个断点）
让脚本从当前断点处继续运行，直到遇到下一个断点或者脚本执行结束。
6.1.6. Deactivate breakpoints（禁用断点）
'Deactivate breakpoints' 的意思是：临时关闭（禁用）所有断点，但不会删除它们。
function sayHi() { console.log("Hi"); }
function sayBye() { console.log("Bye"); }
sayHi();
sayBye();
- 点击运行 → 程序会在第一个断点暂停。
- 如果这时你点击「Deactivate breakpoints」按钮（灰掉），再点 ▶️ 执行 → 它就不会再在第二个断点处停下。
6.1.7. 总结
| 按钮名称 | 图标含义 | 操作结果 | 使用场景 |
|---|
| 🟡 Pause script execution | ⏸️ 暂停 | 暂停当前执行的脚本 | 强制中断代码执行 |
| 🟢 Step over next function call | ⤴️ 跳过函数 | 执行当前行，不进入函数内部 | 快速跳过简单函数 |
| 🔵 Step into next function call | ⬇️ 进入函数 | 进入函数内部调试 | 想看函数内部逻辑 |
| 🟣 Step out of current function | ⬆️ 跳出函数 | 执行完当前函数返回上层 | 结束当前函数调试 |
| 🟠 Resume script execution (Step) | ▶️ 继续执行 | 从当前断点继续执行 | 跳到下一个断点或结束 |
| Deactivate breakpoints | ⛔ 暂时禁用所有断点 | 禁用断点 | 让脚本继续执行，不受断点打断 |
6.2. JavaScript 调试（debugger 的两种调试方法）
在实际开发中，最常用的调试手段之一就是使用 **debugger**。
6.2.1. 方法一：代码中添加 debugger 语句
使用方法：在代码中插入一行 debugger;，当程序执行到这一行时，浏览器会自动暂停执行。
6.2.2. 方法二：在 Sources 面板中手动打断点
- 打开 Sources 面板。
- 在左侧文件树中找到要调试的 JS 文件。
- 点击代码行号，即可在对应行设置一个断点。
6.2.3. 对比总结
| 方法 | 使用场景 | 是否修改代码 | 触发时机 |
|---|
debugger; 语句 | 临时调试、快速插入 | 需要修改源码 | 执行到语句时 |
| 手动断点 | 长期调试或不便改代码时 | 不修改源码 | 命中断点时 |
6.3. 监测变量（watch）
点击右侧的 加号（＋），即可在 Watch 面板 中添加需要监听的属性或变量。
6.4. 通过 DOM 断点追踪页面变化
在 Elements 面板 → Break on...（中断点调试） 有一个重要功能，用于在 DOM 结构发生变化时自动暂停代码执行。
- Subtree modifications（子树修改）：当前选中元素子节点发生变化。
- **Attribute modifications（属性修改）：**当元素的 属性值 被修改时。
- 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 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（子树修改）断点。
6.5. Event Listener Breakpoints
在 Sources 面板 → Event Listener Breakpoints 区域，你可以看到一系列按类别分组的事件类型。
| 分类 | 示例事件 | 说明 |
|---|
| Mouse | click, mousedown, mouseup, mousemove | 鼠标相关事件 |
| Keyboard | keydown, keyup, keypress | 键盘输入事件 |
| Control | resize, scroll, focus, blur | 浏览器或元素控制事件 |
| DOM Mutation | subtree modifications, attribute modifications, node removal | DOM 结构变化事件 |
| XHR /Fetch | Fetch, XHR | 网络请求相关事件 |
| Timer | setTimeout, setInterval | 定时器相关事件 |
有时候我们的代码是写在框架（例如 Vue）中，当我们在 Event Listener Breakpoints 中勾选了 click 并点击按钮时，调试器可能会跳转到 Vue 的内部源码文件。
6.6. Call stack
其实，这种情况下我们并不需要调试框架的源码，只想关注自己的逻辑。
这时可以在右侧的 Call Stack（调用栈） 面板中，找到对应的框架脚本，右键选择 'Add script to ignore list'（添加到忽略列表）。
7. Network
7.1. 字段介绍
- Name：请求名称。
- Status：服务器返回的 状态码。
- Type：资源类型。
- Initiator：发起请求的来源。
- Size：资源的大小。
- Time：请求完成所耗费的时间。
- Waterfall：以瀑布流的形式直观展示每个请求的时间线。
在 Network 面板中，你可以通过右键点击表头来自由定制显示的字段。
7.2. Record/stop network log（开始或停止记录网络日志）
Record network log（记录网络日志）
Stop network log（停止记录网络日志）
- 点击红色按钮后，它会变成灰色空心圆 ⚪，表示 暂停记录。
7.3. Clear network log（清除日志）
在 Network 面板 中，红色圆点旁边有一个 '清空'图标（🚫）。
7.4. 筛选区
在 Network 面板 的过滤栏中，你可以根据请求类型快速筛选需要查看的网络请求：
- All：显示所有请求。
- XHR / Fetch：仅显示 Ajax 请求。
- JS / CSS / Img / Media / Font / Doc：按文件类型分类展示。
- Other：显示其他类型的请求。
7.5. Preserve log（保留日志）
启用 Preserve log（保留日志）选项后，Chrome 会在页面刷新或跳转后仍然保留之前的网络请求记录。
7.6. Disable cache（禁用缓存）
在 Network 面板 中，勾选 Disable cache 后，Chrome 会在页面刷新或发起请求时忽略浏览器缓存。
7.7. Throttling（节流器）
在 Network 面板 中，Throttling 功能可以模拟不同网络环境。
- 可以模拟 慢速 3G、快速 3G、离线 等不同网络环境。
7.8. More network conditions
在 More network conditions 中，还包括两个重要设置：
- User Agent（用户代理）：可以修改浏览器的 User-Agent。
- Accepted content-encodings（可接受内容编码）：告诉服务器浏览器能够解码哪些压缩格式的响应。
例如，当在 User Agent 中选择 Firefox—Windows 并发起请求时，Network 面板的 Request Headers 中就会显示我们模拟的 User-Agent。
7.9. Import/Export HAR file
Network → Export HAR，可以将当前捕获的所有网络请求导出为 HAR 文件。
Network → Import HAR，可以加载之前保存的 HAR 文件到 DevTools 中。
8. Application
Chrome DevTools 中的 Application 面板 用于查看和管理网页在浏览器端存储的数据、缓存资源以及相关应用信息。
- Local Storage / Session Storage（本地存储 / 会话存储）：存储键值对数据。
- Cookies（Cookie 管理）：查看网页设置的所有 Cookie。
- IndexedDB：浏览器提供的 NoSQL 数据库。
- Web SQL（已废弃）：类似 SQLite 的客户端数据库。
- Cache Storage（缓存存储）：管理 Service Worker 或 Cache API 缓存的资源。
- Application Cache（应用缓存，已废弃）：用于老版本网页离线访问。
- Service Workers：查看当前注册的 Service Worker。
- **Manifest:**显示 PWA 应用清单信息。
- Frames / Security：查看页面的 iframe 结构及资源、HTTPS 状态。
例如在 Console 面板 中执行：document.cookie = "username=zhangsan" 然后切换到 Application 面板 → Cookies，就能看到刚刚设置的 username=zhangsan Cookie 已经被成功写入。
9. Performance
Performance 面板用于记录并分析页面的运行过程（加载与交互），帮助你找出性能瓶颈。
9.1. 按钮解释
9.1.1. Record（记录性能）
开始捕获网页的性能数据（CPU、JS、渲染、内存等）。
- 打开 DevTools → 选择「Performance」面板
- 点击 Record（录制按钮）
- 在录制期间执行你想分析的操作
- 再次点击 Record（停止录制）
- 浏览器会生成一份详细的性能时间线报告
9.1.2. Record and Reload（记录并重新加载）
在 页面加载的同时自动开始性能录制，用于分析页面加载性能。
- 选择 'Record and Reload'；
- 浏览器会自动刷新页面并从 加载开始 就开始录制性能。
9.1.3. Clear（清空记录）
9.1.4. 总结
| 功能名称 | 作用说明 | 使用场景 |
|---|
| Record | 手动开始录制性能数据 | 用户交互、动画、特定操作性能分析 |
| Record and Reload | 自动刷新并从加载开始录制 | 页面首屏加载性能分析 |
| Clear | 清除现有记录 | 准备重新采样或对比多组数据时 |
9.2. 保存与加载
Save trace 是保存当前性能录制数据，Load trace 是加载之前保存的性能数据。
9.2.1. Save trace —— 保存性能追踪数据
当你完成一次性能录制后，可以点击 'Save trace' 按钮将当前的性能分析数据导出为一个 .json 文件。
9.2.2. Load trace —— 加载性能追踪文件
'Load trace' 用于导入之前保存的 .json 性能文件。
9.3. 勾选框按钮解释
- Screenshots（截图）：捕获网页的视觉截图序列。
- Memory（内存）：在录制期间同步采集内存使用情况。
- Collect garbage（回收垃圾）：手动触发 GC（Garbage Collection）。
- Show ignore list settings dialogue（忽略列表设置）：打开 '忽略文件列表' 设置窗口。
| 功能 | 作用 | 常用场景 |
|---|
| Screenshots | 捕获网页渲染截图 | 分析白屏、动画流畅度 |
| Memory | 记录内存使用变化 | 查找内存泄漏 |
| Collect garbage | 手动触发 GC | 对比 GC 前后内存占用 |
| Show ignore list settings | 设置忽略文件 | 过滤无关代码、专注业务性能 |
9.4. 设置的下拉面板按钮解释
| 功能名称 | 功能说明 | 使用场景 / 注意事项 |
|---|
| Enable advanced paint instrumentation (slow) | 启用高级绘制监控 | 分析页面复杂渲染、重绘、样式变化导致的性能瓶颈 |
| Disable JavaScript samples | 禁用 JS 样本采集 | 如果你只想分析布局/渲染性能，而不关心 JS 执行细节时使用 |
| Show custom tracks | 显示自定义轨迹 | 用于可视化自己定义的事件 |
9.5. 性能解析
9.5.1. CPU 与 FPS
- 当图表显示为 红色 时，说明 主线程几乎被当前代码占满。
9.5.2. NET
在性能面板中，还有一个 NET 区域，用于表示 网络请求情况。
9.5.3. 每一帧截图
在性能面板上方，被圈出的部分显示了 每一帧的页面截图。
9.5.4. Frames
继续往下可以看到 Frames 面板，它展示了与 绘制帧（Rendering Frames） 相关的信息。
- 红色 / 黄色条 表示 已发生丢帧。
- 绿色条 表示帧率正常。
9.5.5. Layout shifts
上方圈出的部分用于展示 布局（Layout）切换的频率。
9.5.6. Main
Main 面板主要展示 火焰图（Flame Chart）。
- X 轴 表示时间进度。
- Y 轴 表示事件调用的层级关系。
9.5.7. 长任务
如果在 Task（任务）面板 上看到一个 红色小三角，说明该任务属于 长任务（Long Task）。
- 当任务执行时间 超过 50 毫秒 时，就会被视为长任务。
在 火焰图（Flame Chart） 上继续放大，可以看到 Layout（布局计算） 的相关任务。
9.5.8. Summary
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 的对比
| 视图 | 排序方式 | 适用场景 |
|---|
| Call Tree (Top-Down) | 从入口函数展开调用链 | 分析调用路径，找出整个函数调用流程中的瓶颈 |
| Bottom-Up | 按函数自身耗时排序 | 快速找到最耗时的函数，不关心它被谁调用 |
9.5.11. Event Log
- 页面中发生的 各种事件
- 包括 浏览器原生事件、JS 定时器事件、网络请求回调 等
10. Lighthouse
Lighthouse 是 Chrome DevTools 内置的一款自动化网站质量评估工具。
10.1. Performance（性能）
- FCP（First Contentful Paint）：首个内容渲染时间。
- LCP（Largest Contentful Paint）：最大内容渲染时间。
- CLS（Cumulative Layout Shift）：布局偏移。
- TTI（Time to Interactive）：可交互时间。
- Speed Index：加载速度指数。
10.2. Accessibility（可访问性）
10.3. Best Practices（最佳实践）
10.4. SEO（搜索引擎优化）
10.5. Progressive Web App（PWA）
- 检查网页是否具备离线访问、安装到桌面、快速加载等 PWA 特性。
相关免费在线工具
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
- Markdown转HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
- HTML转Markdown
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
- JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
- JSON美化和格式化
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
