知识库

Appearance

Chrome 浏览器调试工具及技巧 ​

目录 ​

Chrome DevTools 简介 ​

Chrome DevTools 是 Google Chrome 浏览器内置的一套强大的 Web 开发和调试工具，是目前最流行、功能最完善的浏览器调试工具，广泛应用于前端开发、性能优化、问题排查等场景。

打开 DevTools 的方式 ​

多种打开方式：

  • 快捷键：F12
  • 快捷键：Ctrl + Shift + I (Windows) / Cmd + Opt + I (Mac)
  • 右键菜单：右键点击页面 → 检查
  • 菜单：右上角三点 → 更多工具 → 开发者工具
  • 快捷键：Ctrl + Shift + J (Windows) / Cmd + Opt + J (Mac) 直接打开 Console 面板
  • 快捷键：Ctrl + Shift + C (Windows) / Cmd + Shift + C (Mac) 直接打开 Elements 面板并启用元素选择器

Elements 面板 ​

Elements 面板用于查看和编辑页面的 HTML 和 CSS，是最常用的面板之一。

主要功能：

  • 查看和编辑 DOM 树
  • 实时编辑 CSS 样式
  • 查看盒模型
  • 查看计算后样式（Computed）
  • 查看事件监听器
  • 检查 DOM 断点

Console 面板 ​

Console 面板用于查看日志、执行 JavaScript 代码，是调试 JavaScript 的重要工具。

主要功能：

  • 查看控制台日志
  • 执行 JavaScript 代码
  • 查看网络请求错误
  • 查看 JavaScript 异常
  • 查看堆栈跟踪

Sources 面板 ​

Sources 面板用于调试 JavaScript 代码，是最强大的调试面板。

主要功能：

  • 设置断点
  • 查看调用堆栈
  • 监视变量和表达式
  • 代码格式化
  • 工作区（Workspaces）映射本地文件
  • Snippets 代码片段
  • 条件断点和日志点

Network 面板 ​

Network 面板用于查看和分析网络请求，是性能优化和接口调试的重要工具。

主要功能：

  • 查看所有网络请求
  • 查看请求和响应头
  • 查看响应内容
  • 模拟网络速度（节流）
  • 禁用缓存
  • 查看请求瀑布图
  • 导出/导入 HAR 文件

Performance 面板 ​

Performance 面板用于记录和分析页面性能，帮助定位性能瓶颈。

主要功能：

  • 记录页面加载和运行时性能
  • 查看 FPS（帧率）图表
  • 查看 CPU 使用情况
  • 查看主线程任务
  • 分析渲染性能
  • 查看网络和主线程时间线

Memory 面板 ​

Memory 面板用于分析内存使用情况和发现内存泄漏。

主要功能：

  • 查看内存堆快照
  • 比较堆快照
  • 查看内存分配时间线
  • 检测内存泄漏
  • 分析内存占用

Application 面板 ​

Application 面板用于查看和管理网页的数据存储。

主要功能：

  • 查看和编辑 LocalStorage
  • 查看和编辑 SessionStorage
  • 查看和编辑 IndexedDB
  • 查看和编辑 Cookies
  • 查看缓存存储
  • 查看和注册 Service Workers
  • 查看 Manifest 文件
  • 清除网站数据

Security 面板 ​

Security 面板用于查看网页的安全信息。

主要功能：

  • 查看 HTTPS 证书信息
  • 查看混合内容警告
  • 查看安全连接信息
  • 查看安全策略
  • 查看安全原点

Lighthouse 面板 ​

Lighthouse 是一个自动化工具，用于改进网页的质量。

主要功能：

  • 性能审计
  • 可访问性审计
  • 最佳实践审计
  • SEO 审计
  • PWA 审计
  • 生成详细报告

Elements 调试技巧 ​

1. 快速选择元素

  • 使用 Ctrl + Shift + C 启用元素选择器
  • 鼠标悬停在页面元素上，Elements 面板会自动定位到对应的 DOM 节点

2. 编辑 DOM

  • 双击 DOM 节点直接编辑内容
  • 右键 DOM 节点 → Edit as HTML 编辑 HTML
  • 使用 H 键隐藏/显示元素
  • 使用 Delete 键删除元素
  • 拖拽 DOM 节点重新排序

3. 编辑 CSS 样式

  • 点击样式值直接编辑
  • 使用 Tab 键在样式属性间切换
  • 按住 Alt 键点击颜色值循环切换颜色格式
  • 使用 ↑/↓ 键增减数值，按住 Shift 增减 10，Ctrl 增减 100

4. 查看盒模型

  • 切换到 Computed 标签
  • 点击 Show all 查看所有计算后样式
  • 查看盒模型示意图，点击可直接编辑

5. DOM 断点

  • 右键 DOM 节点 → Break on
  • 选择 Subtree modifications、Attribute modifications 或 Node removal
  • 当 DOM 发生变化时会自动暂停

Console 调试技巧 ​

1. 常用 console 方法

javascript
console.log('普通日志')
console.error('错误信息')
console.warn('警告信息')
console.info('信息')
console.debug('调试信息')

2. 高级 console 方法

javascript
// 表格形式输出
console.table([
  { name: '张三', age: 20 },
  { name: '李四', age: 25 }
])

// 显示对象属性
console.dir(document.body)

// 分组输出
console.group('用户信息')
console.log('姓名：张三')
console.log('年龄：20')
console.groupEnd()

// 计时
console.time('加载时间')
// ... 代码
console.timeEnd('加载时间')

// 计数
console.count('点击次数')

// 断言
console.assert(1 === 2, '1 不等于 2')

// 清空控制台
console.clear()

3. 控制台快捷命令

javascript
// 上一个表达式的结果
$_

// 最近 5 个 DOM 元素
;($0, $1, $2, $3, $4)

// 查询选择器（document.querySelector 的简写）
$('selector')

// 查询选择器所有（document.querySelectorAll 的简写）
$$('selector')

// 检查元素
inspect(element)

// 获取事件监听器
getEventListeners(element)

// 复制到剪贴板
copy(object)

// 保存为文件
save(object, 'filename.json')

4. 控制台过滤

  • 使用过滤器筛选日志类型
  • 使用正则表达式过滤
  • 使用上下文菜单隐藏特定来源的日志

Sources 调试技巧 ​

1. 设置断点

  • 点击行号设置普通断点
  • 右键行号 → Add conditional breakpoint 设置条件断点
  • 右键行号 → Add log point 设置日志点（不暂停，只输出日志）

2. 调试控制

  • F8 或 Resume script execution：继续执行
  • F10 或 Step over next function call：单步跳过
  • F11 或 Step into next function call：单步进入
  • Shift + F11 或 Step out of current function：单步跳出

3. 查看变量

  • Scope 面板查看当前作用域变量
  • Watch 面板添加监视表达式
  • 鼠标悬停在变量上查看值
  • 在控制台输入变量名查看值

4. Call Stack

  • 查看调用堆栈
  • 点击堆栈帧跳转到对应位置
  • 右键 → Restart frame 重新执行该帧

5. Snippets 代码片段

  • 在 Sources 面板左侧 → Snippets
  • 右键 → New 创建新代码片段
  • 编写代码后右键 → Run 执行

6. Workspaces

  • 将本地文件夹添加到工作区
  • 修改文件后自动保存到本地
  • 实现真正的实时编辑

Network 调试技巧 ​

1. 筛选请求

  • 使用过滤器按类型筛选（XHR、JS、CSS、Img 等）
  • 使用搜索框搜索请求
  • 勾选 Preserve log 保留页面跳转后的日志

2. 查看请求详情

  • Headers：查看请求头和响应头
  • Payload：查看请求参数
  • Preview：预览响应内容
  • Response：查看原始响应
  • Timing：查看请求时间线

3. 网络节流

  • 点击 Online 下拉菜单
  • 选择预设网络速度（Fast 3G、Slow 3G、Offline 等）
  • 或自定义网络速度

4. 禁用缓存

  • 勾选 Disable cache 禁用缓存
  • 右键 → Clear browser cache 清除缓存
  • 右键 → Clear browser cookies 清除 Cookie

5. 其他技巧

  • 右键请求 → Copy → Copy as cURL 复制为 cURL 命令
  • 右键请求 → Block request URL 阻止请求
  • 点击 Import/Export 导入/导出 HAR 文件
  • 使用 Ctrl + F 搜索请求内容

Performance 调试技巧 ​

1. 录制性能

  • 点击录制按钮开始录制
  • 进行操作后点击停止
  • 或点击刷新按钮记录页面加载性能

2. 分析性能数据

  • 查看 FPS 图表，红色表示帧率低
  • 查看 CPU 使用情况
  • 查看 NET 网络请求
  • 点击 Main 主线程查看任务详情

3. 火焰图

  • 点击任务查看详细火焰图
  • 使用鼠标滚轮缩放
  • 拖拽移动时间线
  • 点击函数跳转到 Sources 面板

4. 性能分析

  • 查看 Layers 面板分析图层
  • 查看 Rendering 面板（More tools → Rendering）
  • 勾选 Paint flashing 查看重绘区域
  • 勾选 Layout shifts 查看布局偏移

常用快捷键 ​

全局快捷键：

  • F12：打开/关闭 DevTools
  • Ctrl + Shift + I：打开/关闭 DevTools
  • Ctrl + Shift + J：打开 Console 面板
  • Ctrl + Shift + C：打开 Elements 面板并启用元素选择器
  • Ctrl + Shift + P：打开命令菜单
  • Ctrl + [：左移面板
  • Ctrl + ]：右移面板
  • Ctrl + Shift + D：切换面板位置
  • Ctrl + F：搜索
  • Ctrl + G：跳转到行
  • Ctrl + O：打开文件
  • Ctrl + P：打开文件（命令菜单）
  • Ctrl + Shift + F：全局搜索
  • Esc：切换抽屉式控制台

Elements 面板：

  • Ctrl + Z：撤销
  • Ctrl + Y：重做
  • H：隐藏/显示元素
  • Delete：删除元素
  • F2：编辑 HTML

Sources 面板：

  • F8：继续执行
  • F10：单步跳过
  • F11：单步进入
  • Shift + F11：单步跳出
  • Ctrl + \：暂停执行
  • Ctrl + B：切换断点
  • Ctrl + /：注释/取消注释

Console 面板：

  • Ctrl + L：清空控制台
  • Enter：执行代码
  • Shift + Enter：换行
  • ↑/↓：浏览历史命令

以上就是 Chrome 浏览器调试工具的详细介绍和实用技巧。

基于 VitePress 的本地知识库

Copyright © 2026