浏览器 DevTools 调试完全指南
浏览器开发者工具（DevTools）是前端开发者最强大的武器。本文档涵盖 Chrome DevTools 全部面板、快捷键、调试技巧，看完即可上手调试任何网页。
1. 打开 DevTools
三种打开方式
| 方式 | Windows / Linux | macOS | 说明 |
|---|---|---|---|
| 快捷键 | F12 | F12 | 最快，一键开关 |
| 快捷键 | Ctrl + Shift + I | Cmd + Option + I | 通用快捷键 |
| 右键菜单 | 右键 → 检查 | 右键 → 检查 | 直接定位到对应元素 |
| 快捷键（控制台） | Ctrl + Shift + J | Cmd + Option + J | 直接打开 Console 面板 |
| 菜单 | ⋮ → 更多工具 → 开发者工具 | ⋮ → 更多工具 → 开发者工具 | 最传统的方式 |
DevTools 停靠位置
点击 DevTools 右上角 ⋮ → Dock side：
┌──────────────────────┐ ┌─────────┬────────┐ ┌──────────────────────┐
│ │ │ │ │ │ │
│ 网页内容 │ │ 网页 │DevTools│ │ 网页内容 │
│ │ │ 内容 │ │ │ │
├──────────────────────┤ │ │ │ │ │
│ DevTools │ │ │ │ └──────────────────────┘
└──────────────────────┘ └─────────┴────────┘ ┌──────────────────────┐
底部停靠 右侧停靠 │ DevTools │
(Dock to bottom) (Dock to right) └──────────────────────┘
独立窗口
(Undock into window)
推荐：宽屏用右侧停靠，窄屏用底部停靠
切换快捷键：Ctrl + Shift + D / Cmd + Shift + D2. 全局快捷键速查表
最常用快捷键（必须记住）
| 功能 | Windows / Linux | macOS |
|---|---|---|
| 打开 / 关闭 DevTools | F12 | F12 |
| 打开命令菜单 | Ctrl + Shift + P | Cmd + Shift + P |
| 快速打开文件 | Ctrl + P | Cmd + P |
| 在源码中搜索 | Ctrl + Shift + F | Cmd + Option + F |
| 切换设备模式（响应式） | Ctrl + Shift + M | Cmd + Shift + M |
| 切换 DevTools 停靠位置 | Ctrl + Shift + D | Cmd + Shift + D |
| 刷新页面 | F5 / Ctrl + R | Cmd + R |
| 强制刷新（清缓存） | Ctrl + Shift + R | Cmd + Shift + R |
| 在面板间切换 | Ctrl + ] / Ctrl + [ | Cmd + ] / Cmd + [ |
命令菜单（超级入口）
Ctrl + Shift + P (Cmd + Shift + P) 打开命令菜单，可以：
输入 > → 执行命令（默认模式）
输入 : → 跳转到源码指定行号
输入 @ → 跳转到函数/符号
输入 ! → 运行代码片段 (Snippet)
直接输入 → 搜索并打开文件（等同于 Ctrl+P）
常用命令示例：
> screenshot → 截图（整页 / 可视区域 / 节点）
> theme → 切换深色/浅色主题
> dock → 切换停靠位置
> disable javascript → 禁用 JavaScript
> coverage → 打开代码覆盖率工具
> rendering → 打开渲染面板（FPS、图层等）
> sensors → 打开传感器（模拟地理位置、陀螺仪）3. Elements 面板 — 检查与修改 DOM/CSS
面板布局
┌────────────────────────────────────────────────────────────┐
│ Elements Console Sources Network ... │
├──────────────────────────┬─────────────────────────────────┤
│ │ Styles Computed Layout │
│ DOM 树 │ ┌─────────────────────────────┐ │
│ │ │ element.style { } │ │
│ <html> │ │ │ │
│ <head>...</head> │ │ .my-class { │ │
│ <body> │ │ color: red; │ │
│ <div class="app"> │ │ font-size: 16px; │ │
│ <h1>标题</h1> │ │ } │ │
│ <p>内容</p> ◄──── │ │ │ │
│ </div> │ │ user agent stylesheet │ │
│ </body> │ │ display: block; │ │
│ </html> │ └─────────────────────────────┘ │
├──────────────────────────┴─────────────────────────────────┤
│ 控制台抽屉 (按 Esc 切换显示) │
└────────────────────────────────────────────────────────────┘DOM 树操作
| 操作 | 方法 |
|---|---|
| 选中元素 | 点击左上角 🔍 箭头按钮，然后点击页面上的元素 |
| 选中元素（快捷键） | Ctrl + Shift + C / Cmd + Shift + C |
| 展开/折叠节点 | 点击三角箭头 ▶，或按 → / ← 键 |
| 递归展开所有子节点 | Alt + 点击 三角箭头 |
| 编辑 HTML | 双击标签名/属性/文本，或右键 → Edit as HTML |
| 编辑整块 HTML | 右键 → Edit as HTML（F2） |
| 删除节点 | 选中后按 Delete 或 Backspace |
| 隐藏节点 | 选中后按 H（添加 visibility: hidden） |
| 拖拽移动节点 | 拖动 DOM 节点到新位置 |
| 复制节点 | 右键 → Copy → Copy element / Copy outerHTML |
| 撤销修改 | Ctrl + Z / Cmd + Z |
| 存储为全局变量 | 右键 → Store as global variable（生成 temp1 等变量） |
| 滚动到视图中 | 右键 → Scroll into view |
| 强制伪类状态 | 右键 → Force state → :hover / :active / :focus 等 |
| 截图单个节点 | 右键 → Capture node screenshot |
DOM 断点
右键点击 DOM 节点 → Break on：
┌─────────────────────────────────────┐
│ Break on... │
│ ☐ subtree modifications │ ← 子树变化时断住
│ ☐ attribute modifications │ ← 属性变化时断住
│ ☐ node removal │ ← 节点被删除时断住
└─────────────────────────────────────┘
使用场景：
- 不知道哪段 JS 修改了某个元素？设置 DOM 断点！
- 元素突然消失？设置 node removal 断点
- 样式被动态修改？设置 attribute modifications 断点Styles 面板（CSS 样式）
Styles 面板从上到下，优先级从高到低：
┌─────────────────────────────────────┐
│ element.style { } │ ← 内联样式（最高优先级）
│ │ 点击可直接添加
├─────────────────────────────────────┤
│ .specific-class { │ ← 匹配的 CSS 规则
│ color: red; │ 可以点击值直接修改
│ font-size: 16px; ──────────────── │ ← 划掉 = 被覆盖
│ } │
│ → style.css:42 │ ← 点击跳转到源文件
├─────────────────────────────────────┤
│ div { │ ← 继承的 / 更低优先级的规则
│ margin: 10px; │
│ } │
├─────────────────────────────────────┤
│ user agent stylesheet │ ← 浏览器默认样式（最低）
│ display: block; │
└─────────────────────────────────────┘| 操作 | 方法 |
|---|---|
| 修改属性值 | 点击属性值，直接输入新值 |
| 添加新属性 | 点击规则的 } 前空白区域 |
| 切换属性启用/禁用 | 点击属性前的复选框 ☐ |
| 添加新规则 | 点击右上角 + 按钮 |
| 修改颜色 | 点击颜色色块 🟥 → 打开颜色选择器 |
| 使用取色器 | 颜色选择器中点击吸管图标 💉 |
| 修改盒模型 | 点击 Computed 面板中的盒模型图，直接输入数值 |
| 切换单位 | 按住修改箭头时：Shift = ±10, Alt = ±0.1 |
| 查看 CSS 变量 | 悬停在 var(--name) 上显示实际值 |
| 添加阴影/动画 | 点击属性名旁边的图标按钮 |
Computed 面板（计算后样式）
Computed 面板显示元素最终的计算样式值：
┌─────────────────────────────────────┐
│ 盒模型可视化 │
│ ┌─ margin ──────────────────────┐ │
│ │ ┌─ border ────────────────┐ │ │
│ │ │ ┌─ padding ─────────┐ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ 300 × 200 │ │ │ │ ← 内容尺寸
│ │ │ │ │ │ │ │
│ │ │ └───── 10 ──────────┘ │ │ │ ← padding
│ │ └──────── 1 ──────────────┘ │ │ ← border
│ └─────────── 20 ────────────────┘ │ ← margin
└─────────────────────────────────────┘
勾选 "Show all" 查看所有计算属性（包括默认值）
点击每个属性旁的箭头 → 跳转到定义该属性的 CSS 规则Layout 面板（Grid 和 Flexbox 调试）
当元素使用了 display: flex 或 display: grid 时：
Elements 面板中出现徽章：
<div class="container" flex> ← 点击 flex 徽章高亮
<div class="grid-layout" grid> ← 点击 grid 徽章高亮
Layout 面板功能：
┌─────────────────────────────────────┐
│ Grid overlays │
│ ☑ .grid-layout │ ← 勾选显示网格线
│ Show track sizes: ☑ │ ← 显示行/列尺寸
│ Show area names: ☑ │ ← 显示区域名称
│ Extend grid lines: ☐ │ ← 延长网格线
├─────────────────────────────────────┤
│ Flexbox overlays │
│ ☑ .container │ ← 勾选高亮 flex 容器
└─────────────────────────────────────┘
Grid 覆盖层颜色可以自定义，多个 Grid 用不同颜色区分4. Console 面板 — JavaScript 控制台
面板按钮详解
┌──────────────────────────────────────────────────────────────────┐
│ 🚫 🔽 Filter │ All Errors Warnings Info Verbose │ ⚙️ 🗑️ │
│ │
│ > 在此输入 JavaScript 表达式... │
└──────────────────────────────────────────────────────────────────┘
各按钮作用：
🚫 清除控制台 (Ctrl+L)
🔽 筛选下拉框（按来源过滤：user messages / errors / violations 等）
Filter 文本框 → 输入关键词过滤日志
All / Errors / Warnings / Info / Verbose → 按级别过滤
⚙️ Console Settings：
├── Hide network messages ← 隐藏 404 等网络错误
├── Preserve log ← 页面刷新后保留日志 ★
├── Selected context only ← 仅显示当前上下文
├── Group similar messages ← 合并重复消息
├── Log XMLHttpRequests ← 记录所有 XHR 请求
├── Show timestamps ← 显示时间戳
└── Autocomplete from history ← 自动补全历史命令
🗑️ 清除控制台输出快捷键
| 功能 | Windows / Linux | macOS |
|---|---|---|
| 清除控制台 | Ctrl + L | Cmd + K |
| 多行输入 | Shift + Enter | Shift + Enter |
| 执行代码 | Enter | Enter |
| 上一条命令 | ↑ | ↑ |
| 自动补全 | Tab | Tab |
| 切换 Console 抽屉 | Esc | Esc |
Console API 实用方法
javascript
// === 基础输出 ===
console.log('普通日志') // 普通消息（灰色图标）
console.info('信息') // 信息（蓝色图标）
console.warn('警告') // 警告（黄色三角）
console.error('错误') // 错误（红色叉号）
// === 格式化输出 ===
console.log('%c大红色文字', 'color: red; font-size: 20px; font-weight: bold;')
console.log('名字: %s, 年龄: %d', '张三', 25) // 格式化字符串
// === 表格输出（数组/对象） ===
console.table([
{ name: '张三', age: 25 },
{ name: '李四', age: 30 },
])
// 输出为可排序的表格！非常适合查看数组数据
// === 分组 ===
console.group('用户信息') // 创建可折叠分组
console.log('名字: 张三')
console.log('年龄: 25')
console.groupEnd()
console.groupCollapsed('详细日志') // 默认折叠的分组
console.log('...')
console.groupEnd()
// === 计时 ===
console.time('数据加载') // 开始计时
// ... 一些操作 ...
console.timeEnd('数据加载') // 输出: 数据加载: 123.45ms
// === 计数 ===
function onClick() {
console.count('点击次数') // 点击次数: 1, 点击次数: 2, ...
}
// === 断言 ===
console.assert(1 === 2, '断言失败：1 不等于 2') // 条件为 false 才输出
// === 调用栈 ===
console.trace('追踪调用栈') // 输出当前的函数调用栈
// === 清除 ===
console.clear() // 清空控制台控制台特殊变量与函数
javascript
// === 选中元素引用 ===
$0 // 当前在 Elements 面板选中的元素
$1 // 上一个选中的元素
$2~$4 // 更早选中的元素
// === 选择器（类似 jQuery） ===
$('div.myclass') // 等同于 document.querySelector()
$$('div.myclass') // 等同于 document.querySelectorAll()，返回数组
$x('//div[@class="a"]') // XPath 选择器
// === 实用函数 ===
copy(object) // 将对象复制到剪贴板！非常实用
copy($0.outerHTML) // 复制选中元素的 HTML
inspect(element) // 在 Elements 面板中定位元素
inspect(fn) // 跳转到函数定义的源代码
dir(element) // 以对象形式查看 DOM 元素的属性
dirxml(element) // 以 XML/HTML 形式查看
keys(obj) // Object.keys(obj)
values(obj) // Object.values(obj)
// === 监听事件 ===
monitorEvents($0, 'click') // 监听元素上的点击事件
monitorEvents(window, 'resize') // 监听窗口缩放
unmonitorEvents($0) // 停止监听
// === 监听函数调用 ===
monitor(functionName) // 函数被调用时在控制台输出
unmonitor(functionName) // 停止监听
// === 查看元素上的事件监听器 ===
getEventListeners($0) // 返回元素上所有事件监听器
// === 最后一个表达式的值 ===
$_ // 上一次控制台表达式的返回值实战技巧
javascript
// 1. 快速查看 API 返回数据
fetch('/api/users')
.then((r) => r.json())
.then(console.table)
// 2. 临时修改页面内容测试
document.designMode = 'on' // 整个页面变为可编辑！
// 3. 查找页面上所有图片及尺寸
console.table($$('img').map((i) => ({ src: i.src, w: i.width, h: i.height })))
// 4. 获取所有使用的字体
new Set($$('*').map((e) => getComputedStyle(e).fontFamily))
// 5. 高亮所有元素边框（调试布局）
$$('*').forEach((e) => (e.style.outline = '1px solid red'))5. Sources 面板 — 源代码与断点调试
面板布局
┌────────────────────────────────────────────────────────────────┐
│ Sources │
├──────┬──────────────────────────────┬──────────────────────────┤
│ │ │ │
│ 文件 │ 源代码编辑区 │ 调试控制区 │
│ 导航 │ │ ┌────────────────────┐ │
│ 树 │ 1│ function add(a, b) { │ │ ▶ ⏸ ⏭ ⤵ ⤴ ➡ ⏹ │ │
│ │ 2│ const sum = a + b; ● ← │ │ (调试控制按钮) │ │
│ Page │ 3│ return sum; │ ├────────────────────┤ │
│ ├ top │ 4│ } │ │ Watch │ │
│ │ ├ app.js │ │ │ + Add expression │ │
│ │ └ style..│ │ ├────────────────────┤ │
│ Filesystem│ │ │ Breakpoints │ │
│ Snippets │ │ │ ☑ app.js:2 │ │
│ Overrides │ │ ├────────────────────┤ │
│ │ │ │ Scope │ │
│ │ │ │ Local: sum = 3 │ │
│ │ │ │ Global: window │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Call Stack │ │
│ │ │ │ add (app.js:2) │ │
│ │ │ │ main (app.js:10) │ │
│ │ │ └────────────────────┘ │
└──────┴──────────────────────────────┴──────────────────────────┘左侧导航区
Page 标签页：
└── 按域名/文件夹组织的页面资源
├── top（当前页面）
│ ├── JS 文件
│ ├── CSS 文件
│ └── HTML 文件
└── iframe 子框架
Filesystem 标签页：
└── 可以将本地文件夹映射到 DevTools
修改后直接保存到本地文件！（Workspace 功能）
添加方法：点击 "Add folder to workspace"
Overrides 标签页：
└── 本地覆盖线上文件（不修改服务器）
1. 选择本地文件夹作为覆盖目录
2. 修改源文件后 Ctrl+S 保存
3. 刷新页面后修改依然生效
非常适合调试线上问题！
Snippets 标签页：
└── 保存可复用的代码片段
点击 "New snippet" 添加
右键 → Run 执行（或 Ctrl+Enter）
跨页面保留，不会因刷新丢失断点类型全解
1. 行断点 (Line Breakpoint)
操作：点击源码左侧行号
图标：● 蓝色圆点
用途：最常用，在指定行暂停执行
2. 条件断点 (Conditional Breakpoint)
操作：右键行号 → Add conditional breakpoint
图标：● 橙色圆点
用途：仅当条件为 true 时才暂停
示例：i === 50（循环到第 50 次才断住）
3. 日志断点 (Logpoint)
操作：右键行号 → Add logpoint
图标：● 红色菱形
用途：不暂停执行，在控制台输出信息
示例：'当前值:', x, y （等于插入 console.log 但无需改代码）
4. DOM 断点
操作：Elements 面板右键节点 → Break on
类型：子树变化 / 属性变化 / 节点移除
5. XHR/Fetch 断点
操作：Sources 面板 → XHR/fetch Breakpoints → +
用途：URL 包含指定字符串时断住
示例：输入 "api/users" → 所有匹配的请求都会断住
6. 事件监听器断点 (Event Listener Breakpoints)
操作：Sources 面板 → Event Listener Breakpoints → 展开选择
类型：
├── Mouse: click, dblclick, mousedown, mouseup ...
├── Keyboard: keydown, keyup, keypress ...
├── Touch: touchstart, touchmove, touchend ...
├── Animation: requestAnimationFrame ...
├── Timer: setTimeout, setInterval ...
├── Script: Script First Statement （脚本首行断住）
└── 更多...
7. 异常断点
操作：Sources 面板右上角 ⏸ 按钮
├── Pause on caught exceptions ← 捕获的异常也暂停
└── Pause on uncaught exceptions ← 仅未捕获的异常暂停调试控制按钮详解
断点触发后，代码暂停执行，顶部出现调试控制条：
▶ ⏭ ⤵ ⤴ ➡ ⏹
│ │ │ │ │ │
│ │ │ │ │ └── 停用所有断点 (Deactivate breakpoints)
│ │ │ │ │
│ │ │ │ └── 逐步执行 (Step) — F9
│ │ │ │ 执行当前行的下一步操作
│ │ │ │
│ │ │ └── 跳出函数 (Step Out) — Shift + F11
│ │ │ 执行完当前函数，返回到调用处
│ │ │
│ │ └── 跳入函数 (Step Into) — F11
│ │ 进入当前行调用的函数内部
│ │
│ └── 跳过函数 (Step Over) — F10
│ 执行当前行，但不进入函数内部
│
└── 继续执行 (Resume) — F8
继续运行到下一个断点调试控制快捷键总结：
F8 继续执行 (Resume/Pause)
F10 逐行执行，跳过函数 (Step Over)
F11 逐行执行，进入函数 (Step Into)
Shift+F11 跳出当前函数 (Step Out)
F9 逐步执行 (Step)
实际调试流程示例：
function processOrder(order) { ← F11 进入此函数
const total = calculateTotal(order); ← F10 跳过（不进入 calculateTotal）
const tax = total * 0.1; ← F10 继续下一行
applyDiscount(order); ← F11 进入（想看折扣逻辑）
return total + tax; ← F8 直接运行到下一个断点
}右侧调试面板详解
Watch（监视表达式）：
点击 + 添加要监视的表达式
示例：user.name, arr.length, a + b
每次断点暂停时自动更新值
可以输入任意 JS 表达式
Breakpoints（断点列表）：
列出所有已设置的断点
☑ 复选框控制启用/禁用
右键可以编辑条件、移除断点
点击跳转到源码位置
Scope（作用域变量）：
显示当前断点处可访问的所有变量
├── Local — 当前函数的局部变量
├── Closure — 闭包中的变量
├── Script — 脚本级变量（let/const 在顶层）
└── Global — 全局变量（window 对象）
可以直接双击修改变量值！
Call Stack（调用栈）：
显示代码执行到断点处的函数调用链
从上到下：当前函数 → 调用者 → 更上层调用者
点击每一层可以查看该层的局部变量
右键 → Restart frame 可以重新执行当前函数
示例：
handleClick (app.js:45) ← 当前暂停位置
onClick (react.js:12)
callCallback (react.js:8)
...
Threads（线程）：
Web Worker 多线程调试时使用
显示所有活跃的 worker 线程debugger 语句
javascript
// 在代码中直接插入 debugger 语句
// 当 DevTools 打开时，执行到此行会自动暂停
function complexCalculation(data) {
let result = preProcess(data)
debugger // ← 执行到这里会暂停，可以检查 result 的值
return postProcess(result)
}
// 条件 debugger
if (user.role === 'admin') {
debugger // 只在特定条件下暂停
}黑盒脚本（Ignore List）
问题：调试时老是跳进框架源码（React、jQuery 等），很烦
解决：将框架脚本加入黑盒/忽略列表
方法一：源码编辑区右键 → Add script to ignore list
方法二：Call Stack 中右键某一帧 → Add script to ignore list
方法三：Settings → Ignore List → 添加正则规则
例如：/node_modules/
/jquery\.min\.js/
/react-dom\.production/
效果：
- Step Into 时自动跳过这些文件
- Call Stack 中这些帧默认折叠
- 异常断点不会在这些文件中暂停6. Network 面板 — 网络请求分析
面板布局
┌──────────────────────────────────────────────────────────────────┐
│ 🚫 🔴 ⬇ ▶ 🛡 ▾│ Filter: _________ │ Preserve log Disable cache │
│ All Fetch/XHR JS CSS Img Media Font Doc WS Manifest Other │
├──────────────────────────────────────────────────────────────────┤
│ 瀑布流时间线 (可选显示) │
│ ═══════╤════╤══════════════════════════ │
├──────────────────────────────────────────────────────────────────┤
│ Name Status Type Size Time Waterfall │
│ ────────────────────────────────────────────────────── │
│ index.html 200 doc 15.2KB 45ms ██ │
│ app.js 200 script 250KB 120ms ███████ │
│ style.css 200 css 18KB 35ms ██ │
│ api/users 200 fetch 2.1KB 230ms █████████ │
│ logo.png 200 png 45KB 80ms ████ │
│ ✖ api/data 404 fetch 0B 150ms ██████ │
├──────────────────────────────────────────────────────────────────┤
│ 45 requests │ 1.2MB transferred │ 3.5MB resources │ │
│ Finish: 2.3s │ DOMContentLoaded: 800ms │ Load: 1.8s │
└──────────────────────────────────────────────────────────────────┘工具栏按钮详解
| 按钮 / 选项 | 作用 |
|---|---|
| 🚫 清除 | 清除所有请求记录 |
| 🔴 录制按钮 | 红色 = 录制中，灰色 = 暂停录制 |
| ⬇ 导出 HAR | 导出所有请求为 HAR 文件（可分享给他人分析） |
| ▶ 导入 HAR | 导入 HAR 文件查看 |
| 🛡 拦截请求 | 屏蔽指定请求（右键请求 → Block request URL） |
| Preserve log | 页面跳转/刷新后保留请求记录 ★（排查重定向问题必开） |
| Disable cache | 禁用缓存（DevTools 打开时生效）★ |
| Throttling 下拉 | 模拟网络速度：No throttling / Fast 3G / Slow 3G / Offline |
请求过滤
Filter 文本框支持多种过滤语法：
普通文本 → 按 URL 关键词过滤
-排除词 → 排除包含该词的请求（如 -png）
domain:xxx → 按域名过滤
method:POST → 按请求方法过滤
status-code:404 → 按状态码过滤
larger-than:1M → 按大小过滤
mime-type:json → 按 MIME 类型过滤
is:running → 正在进行的请求
has-response-header:Set-Cookie → 按响应头过滤
按钮过滤器（点击类型按钮）：
All → 显示所有请求
Fetch/XHR → AJAX 请求（最常用 ★）
JS → JavaScript 文件
CSS → 样式表
Img → 图片
Media → 音频/视频
Font → 字体文件
Doc → HTML 文档
WS → WebSocket 连接
Manifest → Web App Manifest请求详情面板
点击任一请求，右侧展开详情面板：
┌─────────────────────────────────────────────┐
│ Headers Payload Preview Response ... │
├─────────────────────────────────────────────┤
各标签页说明：
Headers（请求/响应头）：
├── General
│ ├── Request URL 请求地址
│ ├── Request Method GET / POST / PUT / DELETE ...
│ ├── Status Code 200 / 404 / 500 ...
│ └── Remote Address 服务器 IP
├── Response Headers 服务器返回的 HTTP 头
│ ├── content-type
│ ├── cache-control
│ ├── set-cookie
│ └── ...
└── Request Headers 浏览器发送的 HTTP 头
├── authorization
├── content-type
├── cookie
└── ...
Payload（请求负载）：★ POST 请求必看
├── Query String Parameters URL 中的查询参数
├── Form Data 表单数据
└── Request Payload JSON/XML 请求体
※ 点击 "view source" 查看原始格式
※ 点击 "view parsed" 查看解析后的格式
Preview（预览）：
└── 格式化预览响应内容（JSON 自动格式化、图片直接显示）
Response（原始响应）：
└── 服务器返回的原始内容
Initiator（发起者）：
└── 显示是哪段代码发起的请求（含完整调用栈）
点击可跳转到源代码
Timing（请求耗时）：
├── Queueing 排队等待
├── Stalled 阻塞（等待可用连接）
├── DNS Lookup DNS 解析
├── Initial connection TCP 连接建立
├── SSL SSL 握手
├── Request sent 发送请求
├── Waiting (TTFB) 等待服务器首字节 ★（后端慢看这里）
└── Content Download 下载响应内容
Cookies（Cookie）：
└── 请求和响应中的 Cookie 详情瀑布图（Waterfall）颜色含义
每个请求在 Waterfall 列显示的颜色条：
浅色部分（左边）= 等待时间 (TTFB)
深色部分（右边）= 下载时间
颜色对应请求类型：
蓝色 → HTML 文档
橙色 → JS 脚本
紫色 → CSS 样式表
绿色 → 图片
灰色 → 其他资源
竖线标记：
蓝色竖线 → DOMContentLoaded 事件（DOM 解析完成）
红色竖线 → Load 事件（所有资源加载完成）实战技巧
1. 重放请求
右键请求 → Replay XHR（重新发送完全相同的请求）
2. 复制为 cURL
右键请求 → Copy → Copy as cURL
可以在终端直接执行，或导入 Postman
3. 复制为 Fetch
右键请求 → Copy → Copy as fetch
可以在控制台直接粘贴执行
4. 屏蔽请求
右键请求 → Block request URL（测试请求失败的场景）
右键请求 → Block request domain（屏蔽整个域名）
5. 覆盖响应内容（PG 117+）
右键请求 → Override content
可以修改服务器返回的内容进行调试！
6. 模拟离线
Throttling 下拉 → Offline
7. 查看 WebSocket 帧
点击 WS 类型的请求 → Messages 标签页
可以看到每一帧的发送和接收内容7. Performance 面板 — 性能分析
录制方法
┌──────────────────────────────────────────────────┐
│ ● 🔄 🗑 ⬇ ⬆ ⚙️ │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ └── 设置（CPU 减速、网络模拟）│
│ │ │ │ │ └── 导入性能数据 │
│ │ │ │ └── 导出性能数据 │
│ │ │ └── 清除录制 │
│ │ └── 录制并刷新页面（Ctrl+Shift+E） │
│ └── 开始/停止录制（Ctrl+E） │
└──────────────────────────────────────────────────┘
两种录制方式：
● 手动录制：点击 ● → 操作页面 → 再次点击 ● 停止
🔄 加载录制：点击 🔄 → 自动刷新页面并录制至 Load 事件
推荐设置：
⚙️ → CPU: 4x slowdown（模拟低端设备）
⚙️ → Network: Slow 3G（模拟慢网络）录制结果解读
录制完成后显示：
┌──────────────────────────────────────────────────┐
│ 时间轴概览（可拖拽选择时间范围） │
│ ▃▃▅▅▇▇▃▃▁▁▃▃▅▅▃▃▁▁▃▃▅▅ │
├──────────────────────────────────────────────────┤
│ FPS ████ ██ ████████ ██████ │ ← 绿色条越高=帧率越高
│ CPU ▓▓▓▒▒▒░░▓▓▓▒▒▒░░ │ ← CPU 使用率（颜色区分类型）
│ NET ═══════════ │ ← 网络请求时间线
├──────────────────────────────────────────────────┤
│ Network ──■■──■■■──■■── │ ← 每个请求的详细时间
│ Frames │60│60│30│60│60│ │ ← 每帧持续时间
│ Main ┬────────────────────────────── │ ← 主线程活动 ★
│ ├─ Task ───────────────── │
│ │ ├─ Parse HTML │
│ │ ├─ Evaluate Script ──── │
│ │ │ └─ functionA ─── │
│ │ │ └─ functionB ─ │
│ │ └─ Recalculate Style │
│ └─ Task ────── │
│ Compositor ──■──■──■──■── │ ← 合成线程
│ GPU ──═══──═══──═══── │ ← GPU 活动
├──────────────────────────────────────────────────┤
│ Summary Bottom-Up Call Tree Event Log │
│ ┌───────────────────────────────────────┐ │
│ │ Loading: 120ms ████ │ │
│ │ Scripting: 450ms ████████████ │ │ ← 各类型耗时占比
│ │ Rendering: 80ms ███ │ │
│ │ Painting: 30ms █ │ │
│ │ System: 50ms ██ │ │
│ │ Idle: 270ms ████████ │ │
│ └───────────────────────────────────────┘ │
└──────────────────────────────────────────────────┘
颜色含义：
黄色 = JavaScript 执行 (Scripting)
紫色 = 样式计算/布局 (Rendering)
绿色 = 绘制/合成 (Painting)
灰色 = 系统/空闲Main 线程火焰图
Main 线程是最重要的分析区域：
Task ════════════════════════════════════
├─ Parse HTML ████
├─ Evaluate Script ═══════════════════
│ ├─ compile ██
│ ├─ app.init() ═════════════════
│ │ ├─ fetchData() ═══════════
│ │ │ └─ processResponse() ██████ ← 找到耗时最长的函数！
│ │ └─ renderUI() ════
│ │ └─ createElements() ███
│ └─ bindEvents() ██
└─ Recalculate Style ██
宽度 = 执行时间（越宽越耗时）
深度 = 调用层级（从上到下是调用关系）
红色三角标记 ▲ = Long Task（超过 50ms 的任务）
点击任何块可以看到详细信息和源码位置底部分析面板
Summary（摘要）：
显示选定时间范围内各类活动的耗时饼图
Bottom-Up（自底向上）：
按自身耗时排序，直接看到最耗时的函数
Self Time = 函数本身消耗的时间（不含子调用）
Total Time = 函数及其所有子调用的总时间
Call Tree（调用树）：
从顶层调用开始，逐层展开
可以看到完整的调用链路
Event Log（事件日志）：
按时间顺序列出所有事件
可以按类型过滤（Loading / Scripting / Rendering / Painting）8. Application 面板 — 存储与 PWA
面板结构
┌─────────────────────────────────────────────────────┐
│ Application │
├──────────────┬──────────────────────────────────────┤
│ │ │
│ Application │ 右侧显示选中项的详细内容 │
│ ├ Manifest │ │
│ └ Service │ │
│ Workers │ │
│ │ │
│ Storage │ │
│ ├ Local │ ┌────────────┬──────────────┐ │
│ │ Storage │ │ Key │ Value │ │
│ ├ Session │ ├────────────┼──────────────┤ │
│ │ Storage │ │ token │ abc123... │ │
│ ├ IndexedDB │ │ theme │ dark │ │
│ ├ Cookies │ │ user │ {"name":...} │ │
│ └ Cache │ └────────────┴──────────────┘ │
│ Storage │ │
│ │ │
│ Background │ │
│ Services │ │
│ ├ Back/ │ │
│ │ Forward │ │
│ │ Cache │ │
│ └ ... │ │
└──────────────┴──────────────────────────────────────┘各存储类型操作
| 存储类型 | 操作 | 用途 |
|---|---|---|
| Local Storage | 双击编辑值，右键删除，底部 + 添加 | 持久化键值对存储 |
| Session Storage | 同上，页面关闭后清除 | 会话级别存储 |
| Cookies | 可查看/编辑/删除每个 Cookie 的所有属性 | 身份验证、会话管理 |
| IndexedDB | 展开数据库 → 对象存储 → 查看/删除记录 | 大量结构化数据存储 |
| Cache Storage | 查看 Service Worker 缓存的资源 | PWA 离线缓存 |
Storage 面板顶部工具：
🗑 Clear site data ← 一键清除所有存储数据 ★
可以选择清除哪些类型：
☑ Local and session storage
☑ IndexedDB
☑ Cookies
☑ Cache storage
☑ Service workers9. Lighthouse 面板 — 性能审计
使用方法
┌──────────────────────────────────────────┐
│ Lighthouse │
│ │
│ Categories: │
│ ☑ Performance 性能 │
│ ☑ Accessibility 无障碍访问 │
│ ☑ Best Practices 最佳实践 │
│ ☑ SEO 搜索引擎优化 │
│ ☑ Progressive Web App │
│ │
│ Device: │
│ ○ Mobile ● Desktop │
│ │
│ [Analyze page load] ← 点击开始审计 │
└──────────────────────────────────────────┘
审计完成后输出评分报告（0-100 分）：
🟢 90-100 优秀
🟡 50-89 需要改进
🔴 0-49 差
每个问题都有：
- 具体描述
- 影响评估
- 修复建议
- 相关文档链接10. 其他实用面板与工具
Memory 面板（内存分析）
三种分析模式：
○ Heap snapshot 堆快照（查看当前内存中所有对象）
○ Allocation timeline 分配时间线（跟踪对象分配过程）
○ Allocation sampling 分配采样（低开销的分配追踪）
排查内存泄漏步骤：
1. 拍摄堆快照 #1
2. 执行怀疑泄漏的操作
3. 拍摄堆快照 #2
4. 选择快照 #2 → 下拉选 "Comparison" → 对比快照 #1
5. 查看 Delta 列中增加的对象
6. 展开查看具体是哪些对象未被释放Recorder 面板（录制用户操作）
功能：录制用户操作并生成可回放的脚本
1. 点击 "Create a new recording"
2. 点击 "Start recording"
3. 在页面上进行操作（点击、输入、导航等）
4. 点击 "End recording"
5. 可以回放、编辑、导出为 Puppeteer/Playwright 脚本
用途：
- 自动化回归测试
- 复现 Bug 步骤
- 性能基准测试Rendering 面板（渲染调试）
通过命令菜单打开：Ctrl+Shift+P → "rendering"
☑ Paint flashing 高亮重绘区域（绿色闪烁）★
☑ Layout shift regions 高亮布局偏移区域（蓝色）
☑ Layer borders 显示合成层边界
☑ FPS meter 实时帧率指示器 ★
☑ Scrolling performance 高亮慢滚动区域
☑ Core Web Vitals 显示核心 Web 指标
Emulate CSS media:
├── print 模拟打印样式
└── screen 恢复屏幕样式
Emulate CSS color scheme:
├── prefers-color-scheme: dark 模拟深色模式 ★
└── prefers-color-scheme: light 模拟浅色模式
Emulate vision deficiencies:
├── Blurred vision 视力模糊
├── Protanopia 红色盲
├── Deuteranopia 绿色盲
└── ... 其他色觉缺陷Coverage 面板（代码覆盖率）
通过命令菜单打开：Ctrl+Shift+P → "coverage"
点击 🔴 开始录制 → 操作页面 → 查看结果
┌────────────────────────────────────────────────┐
│ URL Type Total Bytes Unused % │
│ app.js JS 250KB 68% ██ │ ← 68% 代码未使用！
│ vendor.js JS 800KB 82% ██ │ ← 需要代码分割
│ style.css CSS 50KB 45% █ │
└────────────────────────────────────────────────┘
点击文件 → Sources 面板中显示：
绿色行 = 已执行的代码
红色行 = 未执行的代码（可能可以懒加载或移除）11. 设备模拟（Device Mode）
开启方式
Ctrl + Shift + M (Cmd + Shift + M) 或点击工具栏 📱 图标
┌──────────────────────────────────────────────────────────┐
│ Responsive ▾ │ 375 × 667 │ 100% ▾ │ Online ▾ │ 🔄 │
│ ├── iPhone SE │
│ ├── iPhone 14 Pro Max │
│ ├── iPad Air │
│ ├── Samsung Galaxy S20 │
│ ├── Pixel 7 │
│ ├── ...预设设备列表 │
│ └── Edit → 自定义设备 │
├──────────────────────────────────────────────────────────┤
│ │
│ 模拟的移动端视口 │
│ │
│ ┌──────────────────────────────┐ │
│ │ │ │
│ │ 页面在手机上的样子 │ │
│ │ │ │
│ └──────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────┘设备模式功能
顶部工具栏（从左到右）：
Responsive ▾ → 选择预设设备或自由调整尺寸
375 × 667 → 手动输入宽高
100% ▾ → 缩放比例（不影响实际像素）
Online ▾ → 网络模拟（Offline / Slow 3G / Fast 3G）
🔄 → 旋转屏幕（横屏/竖屏切换）
额外功能（点击右上角 ⋮）：
├── Show device frame 显示手机外壳
├── Show media queries 显示媒体查询断点（横条标尺）
├── Show rulers 显示标尺
└── Add device pixel ratio 模拟设备像素比（DPR）
触摸模拟：
开启设备模式后，鼠标自动变为触摸模拟
单指 → 点击/拖拽
Shift + 拖拽 → 双指缩放12. 调试实战场景速查
场景对照表
| 问题场景 | 使用面板 / 方法 |
|---|---|
| 页面样式不对 | Elements → Styles 面板，检查 CSS 规则优先级 |
| 布局错乱 | Elements → Computed 看盒模型；Layout 看 Grid/Flex |
| 按钮点击无反应 | Sources → Event Listener Breakpoints → Mouse → click |
| AJAX 请求失败 | Network → Fetch/XHR 过滤 → 查看 Status / Response |
| 页面白屏 | Console 看报错；Network 看资源是否 404 |
| 页面加载慢 | Network 看瀑布图；Performance 录制分析；Lighthouse 审计 |
| 不知道哪段 JS 改了元素 | Elements → 右键 → Break on → attribute/subtree 断点 |
| 排查内存泄漏 | Memory → Heap Snapshot 对比 |
| 排查动画卡顿 | Performance 录制 → 看 Main 线程长任务；Rendering → FPS |
| 测试移动端适配 | Ctrl+Shift+M 设备模拟 |
| 测试深色模式 | Rendering → Emulate CSS media → prefers-color-scheme |
| 代码太大需要优化 | Coverage 面板分析未使用代码 |
| Cookie/Storage 问题 | Application 面板查看和编辑 |
| 查看请求是否携带正确的 Header | Network → 点击请求 → Headers 标签页 |
| 复现线上 Bug | Overrides 覆盖线上文件进行调试 |
| 接口返回数据不对 | Network → Preview 查看响应；Console 中 fetch 重放 |
经典调试工作流
前端 Bug 排查通用流程：
1. 打开 Console 面板
└── 有没有红色报错？→ 有就先解决报错
2. 检查 Network 面板
└── 所有请求都成功了吗？→ 找到 4xx/5xx 的请求
3. 检查 Elements 面板
└── DOM 结构和 CSS 是否符合预期？→ 修改样式实时预览
4. 设置断点调试
└── Sources 面板 → 在关键代码处打断点 → 逐步执行
5. 检查数据流
└── Console 中打印变量 / Watch 监视表达式 / Scope 查看变量
6. 性能问题
└── Performance 录制 → 找到长任务 → 定位到具体函数小结
- F12 打开 DevTools，Ctrl+Shift+P 命令菜单是万能入口
- Elements 面板看 DOM 和 CSS，右键菜单功能丰富，善用 DOM 断点
- Console 不只是
console.log，$0、copy()、monitorEvents()都是利器- Sources 面板是调试核心，掌握 F8/F10/F11 三个快捷键就能高效调试
- Network 面板排查接口问题，Preserve log 和 Disable cache 建议常开
- Performance 面板分析性能瓶颈，关注 Main 线程的长任务
- Application 面板管理存储数据，一键清除功能很实用
- 设备模式 模拟移动端，支持触摸、网络节流、DPR 模拟
- 调试核心思路：Console 看报错 → Network 看请求 → Elements 看结构 → Sources 打断点