跳到主要内容Chrome 开发者工具（DevTools）快速入门 | 极客日志JavaScript大前端
Chrome 开发者工具（DevTools）快速入门
Chrome DevTools 快速入门指南，涵盖打开方式、命令菜单、常用面板（Elements、Console、Sources、Network 等）功能详解。介绍元素检查、样式调试、移动端模拟、DOM 查询、事件监听、断点调试、网络请求分析、性能监控及 Lighthouse 评估。提供实用快捷键与操作技巧，帮助开发者提升排查效率与优化能力。
怪力乱神35 浏览 Chrome 开发者工具（DevTools）快速入门
在前端开发中，Chrome 开发者工具（DevTools） 是排查问题、优化性能、理解浏览器行为最强大的助手之一。无论是想快速定位页面样式异常、分析接口请求，还是调试 JavaScript 逻辑，DevTools 都能提供直观高效的方式帮助我们'看清代码背后发生了什么'。
1. 打开方式与放大缩小
1.1 快捷键
- Windows/Linux：
F12 或 Ctrl + Shift + I
- macOS：
Command + Option + I
1.2 其他方式
- 右键打开：在页面任意元素上右键 → '检查 (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 DOM 结构 与 CSS 样式。
4.2 界面结构
上面是 DOM 树结构（HTML），下面是 样式区（Styles / Computed）。
4.3 检查元素
打开调试面板后，点击左上角的 箭头图标（选择元素模式），然后将鼠标移动到想要检查的元素上。
高亮区域代表元素在页面布局中的不同部分：
- 🩵 淡蓝色：表示元素本身（content + padding + border）所占的空间。
- 🟧 淡橙色：表示 margin（外边距）。
- 💚 淡绿色：表示 padding（内边距）。
4.4 切换移动端
点击左上角的 手机与平板图标（Toggle device toolbar），进入移动端预览模式。
- Dimensions（设备尺寸）：选择设备型号或 Responsive。
- 百分比（Zoom）：放大或缩小视图。
- Network conditions（网络条件）：模拟 Fast 3G, Slow 3G, Offline 等。
- Save-Data：模拟节省数据模式。
- Rotate（旋转）：切换横屏 / 竖屏。
4.5 查询 DOM 节点
按下 Ctrl + F（Windows） 或 Command + F（Mac），下方会出现搜索框。
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 样式。
.element.style { color: red; background-color: #f5f5f5; }
在 Elements 面板 → Styles（样式） 区域，还会看到一些特殊标记：
user agent stylesheet：浏览器默认样式。Inherited from xx：从父元素继承的样式。- Pseudo：伪元素或伪类的样式。
4.7 伪类状态调试
如果希望在调试时 让这些状态保持常驻，可以按照以下步骤操作：
- 在 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）调试相关功能
- 查看类名：在 DOM 树上方可以看到
class="xxx"。
- 添加 / 删除类：在右侧 Elements → Styles → .cls 输入框中，点击 '+ Add class'。
- 切换类名：支持快速勾选 / 取消已有类。
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>
4.8.2 进阶使用方法
假设你有一个盒子，里面包含多个子元素（items），每个子元素都有同样的类名 item，样式如下：
.item { padding: 10px; background-color: #f5f5f5; margin-bottom: 5px; }
如果在 Styles 面板 修改了 .item 的 padding，所有具有 .item 类的元素都会同步变化。
使用 :cls 功能：在 Elements 面板 中选中你想单独调试的元素，找到右侧 Styles 面板 上方的 :cls 区域，勾选或取消某个 class 的状态，Chrome 会 只对选中的元素生效。
4.9 复制样式与 HTML 结构
4.9.1 复制样式
在 Elements 面板 中选中目标元素，将鼠标悬停在元素的 类名 上，右键选择：Copy → Copy styles。
4.9.2 复制 HTML 结构
右键点击选中的元素，在弹出菜单中选择：Copy → Copy outerHTML。
4.10 图形化面板（Computed）
4.10.1 Computed 的主要特点
- 显示最终样式：列出元素所有实际生效的 CSS 属性和值。
- 图形化盒模型（Box Model）：直观展示 Content, Padding, Border, Margin。
- 支持快速筛选和搜索：输入属性名快速定位。
- 实时修改样式：点击数值可以直接编辑。
4.10.2 观察布局空间
向下滑动到最底部，会看到 图形化盒模型（Box Model）面板。
4.10.3 快速查询与搜索
可以在 Computed 面板 上方的 搜索输入框 输入 background 或相关属性名。
4.10.4 Computed 面板功能：Show all 与 Group
- Show all：显示元素的 所有 CSS 属性。
- Group：将样式按 类型分组。
4.11 布局面板（Layout）
Layout 面板主要分为两个部分：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-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：显示数字编号。
- Show line names：显示命名的线。
- Hide line labels：隐藏所有标签。
- Show track sizes：显示每行/列的尺寸。
- Show area names：在格子中显示 header / sidebar / main / footer。
- Extend grid lines：网格线延伸到页面外。
当页面中的元素使用了 Grid 或 Flexbox 时，Chrome 会在元素右侧自动显示一个小标签（例如 grid 或 flex）。点击这个标签即可快速切换布局辅助线的显示状态。
在 Styles 面板中也可以直接调试布局。当选中使用了 Flexbox 或 Grid 的元素时，在 CSS 样式规则旁边会出现一个小图标，点击该图标会显示该元素的 布局辅助线。
4.12 绑定事件面板（Event listenters）
Event Listeners 是 Chrome DevTools 中专门用来 查看和调试 DOM 元素绑定的事件 的面板。
调试代码：
<!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>
点击 事件旁边的删除图标，即可移除该事件监听器。
4.13 Properties 面板
Properties 面板用于查看 选中 DOM 元素的所有属性和方法。
主要功能包括查看元素的所有属性、事件绑定情况、原型链及调试 JavaScript 对象属性。
4.14 Accessibility
Accessibility 面板是 Chrome DevTools 中用于 检查网页无障碍（A11y）信息 的工具。
可查看元素的无障碍属性、树状结构展示、属性与状态，以及调试辅助功能问题。
5. Console（控制台）
Console 面板是 DevTools 中用于 查看日志、执行 JavaScript 代码以及调试脚本 的核心工具。
5.1 执行 JavaScript 代码
5.1.1 执行语句
在 Console 面板中输入例如：let a = 1
- 指向右边的箭头（>）表示这是你输入的代码。
- 指向左边的箭头（<）表示该语句的 返回值。
5.1.2 $_
$_ 是 Chrome Console 中的一个 快捷变量，用于 访问最近一次表达式的结果。
5.1.3 $0 快捷变量
在 Chrome DevTools Console 中，有一些 快捷变量 用于快速引用最近选中的 DOM 元素：
| 变量 | 含义 |
|---|
$0 | 当前在 Elements 面板选中的 DOM 元素 |
$1 | 上一次选中的 DOM 元素 |
$2 | 再上一次选中的 DOM 元素 |
$3 | 再再上一次选中的 DOM 元素 |
$4 | 再再再上一次选中的 DOM 元素 |
5.2 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.3 Log 级别筛选
在 Console 面板顶部，可以通过 Log 级别筛选 来控制显示哪些类型的日志。
5.4 监视变量（Watch Expressions）
小眼睛用于 实时监视变量或表达式的值变化。
调试代码：
let count = 0;
setInterval(() => { count++; }, 1000);
直接在控制台观察 count 的值时，系统会实时显示并更新它的变化。
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（禁用断点）
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 的两种调试方法）
6.2.1 方法一：代码中添加 debugger 语句
在代码中插入一行 debugger;，当程序执行到这一行时，浏览器会自动暂停执行。
6.2.2 方法二：在 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>
6.5 Event Listener Breakpoints
在 Sources 面板 → Event Listener Breakpoints 区域，你可以看到一系列按类别分组的事件类型。
| 分类 | 示例事件 | 说明 |
|---|
| Mouse | click, mousedown | 鼠标相关事件 |
| Keyboard | keydown, keyup | 键盘输入事件 |
| Control | resize, scroll | 浏览器或元素控制事件 |
| DOM Mutation | subtree modifications | 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
点击 Clear network log 按钮后，会立即清除当前所有已捕获的网络请求记录。
7.4 筛选区
- All：显示所有请求。
- XHR / Fetch：仅显示 Ajax 请求。
- JS / CSS / Img / Media / Font / Doc：按文件类型分类展示。
- Other：显示其他类型的请求。
7.5 Preserve log（保留日志）
启用 Preserve log（保留日志）选项后，Chrome 会在页面刷新或跳转后仍然保留之前的网络请求记录。
7.6 Disable cache（禁用缓存）
勾选 Disable cache 后，Chrome 会在页面刷新或发起请求时忽略浏览器缓存。
7.7 Throttling（节流器）
Throttling 功能可以模拟不同网络环境。
7.8 More network conditions
- User Agent（用户代理）：可以修改浏览器的 User-Agent。
- Accepted content-encodings（可接受内容编码）：告诉服务器浏览器能够解码哪些压缩格式。
7.9 Import/Export HAR file
Network → Export HAR，可以将当前捕获的所有网络请求导出为 HAR 文件。
8. Application
Chrome DevTools 中的 Application 面板 用于查看和管理网页在浏览器端存储的数据、缓存资源以及相关应用信息。
- Local Storage / Session Storage：存储键值对数据。
- Cookies：查看网页设置的所有 Cookie。
- IndexedDB：浏览器提供的 NoSQL 数据库。
- Cache Storage：管理 Service Worker 或 Cache API 缓存的资源。
- Service Workers：查看当前注册的 Service Worker。
- Manifest：显示 PWA 应用清单信息。
- Frames / Security：查看页面的 iframe 结构及资源、HTTPS 状态。
例如在 Console 面板 中执行：document.cookie = "username=zhangsan" 然后切换到 Application 面板 → Cookies，就能看到刚刚设置的 username=zhangsan Cookie 已经被成功写入。
9. Performance
Performance 面板用于记录并分析页面的运行过程（加载与交互），帮助你找出性能瓶颈。
Google DevTools Jank Sample 是由 Google 开发者提供的一个性能测试示例页面。
点击 '增加' 按钮后，页面会不断生成大量元素，随着数量的增加，渲染与计算压力逐渐上升，页面的性能也会明显下降，出现卡顿。
而点击 '优化' 按钮后，可以看到页面运行变得流畅许多，清晰展示了性能优化前后的对比效果。
9.1 按钮解释
9.1.1 Record（记录性能）
开始捕获网页的性能数据（CPU、JS、渲染、内存等）。
9.1.2 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 | 对比 GC 前后内存占用 |
| Show ignore list settings | 设置忽略文件 | 过滤无关代码、专注业务性能 |
9.4 设置的下拉面板按钮解释
| 功能名称 | 功能说明 | 使用场景 / 注意事项 |
|---|
| Enable advanced paint instrumentation (slow) | 启用高级绘制监控 | 分析页面复杂渲染、重绘、样式变化导致的性能瓶颈 |
| Disable JavaScript samples | 禁用 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）。
9.5.7 长任务
如果在 Task（任务）面板 上看到一个 红色小三角，说明该任务属于 长任务（Long Task）。
在 火焰图（Flame Chart） 上继续放大，可以看到 Layout（布局计算） 的相关任务。
9.5.8 Summary
Summary 面板会直观展示页面渲染统计。
9.5.9 Bottom-Up
Bottom-Up 面板是 从最消耗时间的函数开始向上统计调用链 的一种视图。
9.5.10 Call Tree
Call Tree（调用树） 是一种 从入口函数开始，按调用层级展开函数执行的视图。
Call Tree 与 Bottom-Up 的对比
| 视图 | 排序方式 | 适用场景 |
|---|
| Call Tree (Top-Down) | 从入口函数展开调用链 | 分析调用路径，找出整个函数调用流程中的瓶颈 |
| Bottom-Up | 按函数自身耗时排序 | 快速找到最耗时的函数，不关心它被谁调用 |
9.5.11 Event Log
Event Log 用来展示页面中发生的 各种事件。
10. Lighthouse
Lighthouse 是 Chrome DevTools 内置的一款自动化网站质量评估工具。
10.1 Performance（性能）
测试网页加载速度与交互性能。
重点指标包括：FCP, LCP, CLS, TTI, Speed Index。
10.2 Accessibility（可访问性）
10.3 Best Practices（最佳实践）
10.4 SEO（搜索引擎优化）
10.5 Progressive Web App（PWA）
检查网页是否具备离线访问、安装到桌面、快速加载等 PWA 特性。
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
