王玉军博客

Appearance

Chrome DevTools 调试技巧 ​

Chrome DevTools 简介 ​

Chrome DevTools 是 Google Chrome 浏览器内置的一组 web 开发和调试工具。它提供了丰富的功能，帮助开发者检查网页元素、调试 JavaScript、分析网络请求、优化性能等。

打开 DevTools ​

方法：

  • 右键点击页面，选择「检查」
  • 使用快捷键：F12 或 Ctrl+Shift+I（Windows/Linux），Cmd+Option+I（macOS）
  • 菜单路径：更多工具 -> 开发者工具

主要面板 ​

1. Elements 面板 ​

功能：

  • 查看和修改 DOM 结构
  • 检查和编辑 CSS 样式
  • 实时预览修改效果
  • 查看元素的盒模型

常用功能：

选择元素 ​

  • 点击左上角的选择器图标，然后点击页面上的元素
  • 按 Ctrl+Shift+C（Windows/Linux）或 Cmd+Shift+C（macOS）

编辑元素 ​

  • 双击元素标签进行编辑
  • 右键点击元素，选择「编辑为 HTML」

编辑样式 ​

  • 在「Styles」面板中修改 CSS 属性
  • 点击颜色值打开颜色选择器
  • 点击盒模型中的数值调整元素尺寸

伪元素和事件监听器 ​

  • 在「Elements」面板中查看元素的伪元素
  • 在「Event Listeners」面板中查看元素的事件监听器

2. Console 面板 ​

功能：

  • 执行 JavaScript 代码
  • 查看控制台输出
  • 调试错误和警告
  • 查看网络请求和响应

常用功能：

执行命令 ​

  • 在控制台中直接输入 JavaScript 代码并按 Enter 执行
  • 使用 console.log() 输出信息
  • 使用 console.warn() 输出警告
  • 使用 console.error() 输出错误
  • 使用 console.table() 以表格形式输出对象

特殊命令 ​

  • $()：等同于 document.querySelector()
  • $$()：等同于 document.querySelectorAll()
  • $0：当前选中的元素
  • clear()：清空控制台
  • copy()：复制对象到剪贴板

控制台过滤器 ​

  • 按类型过滤：Errors、Warnings、Info、Logs
  • 按来源过滤：All、User Messages、Messages from Scripts

3. Sources 面板 ​

功能：

  • 查看和编辑 JavaScript 代码
  • 设置断点和调试代码
  • 查看代码执行流程
  • 监控变量变化

常用功能：

断点设置 ​

  • 点击行号设置断点
  • 右键点击设置条件断点
  • 在代码中使用 debugger; 语句

调试控制 ​

  • 继续执行：F8 或点击继续按钮
  • 单步跳过：F10 或点击单步跳过按钮
  • 单步进入：F11 或点击单步进入按钮
  • 单步退出：Shift+F11 或点击单步退出按钮

监视表达式 ​

  • 在「Watch」面板中添加表达式
  • 实时查看表达式的值

调用栈 ​

  • 在「Call Stack」面板中查看函数调用栈
  • 点击栈帧查看相应的代码位置

4. Network 面板 ​

功能：

  • 查看网络请求和响应
  • 分析请求时间和大小
  • 查看请求头和响应头
  • 模拟网络条件

常用功能：

请求筛选 ​

  • 按类型筛选：XHR、JS、CSS、Img、Font 等
  • 按状态筛选：All、Successful、Failed
  • 按域名筛选

请求详情 ​

  • 点击请求查看详情
  • 查看 Headers、Preview、Response、Timing 等信息

性能分析 ​

  • 查看请求的瀑布图
  • 分析请求的各个阶段耗时
  • 识别慢请求

网络条件模拟 ​

  • 选择预定义的网络条件：Online、Slow 3G、Fast 3G
  • 自定义网络条件
  • 模拟离线状态

5. Performance 面板 ​

功能：

  • 分析页面加载性能
  • 识别性能瓶颈
  • 查看 JavaScript 执行时间
  • 分析渲染性能

常用功能：

录制性能 ​

  • 点击「Record」按钮开始录制
  • 执行操作后点击「Stop」按钮停止录制
  • 查看性能分析结果

性能指标 ​

  • Frames：帧率分析
  • Main：主线程活动
  • Network：网络活动
  • Interactions：用户交互

分析工具 ​

  • 使用火焰图查看函数调用时间
  • 查看 CPU 使用率
  • 分析内存使用情况

6. Memory 面板 ​

功能：

  • 分析内存使用情况
  • 检测内存泄漏
  • 查看内存分配

常用功能：

内存快照 ​

  • 拍摄堆快照
  • 比较不同时间点的快照
  • 识别内存泄漏

内存分配时间线 ​

  • 记录内存分配情况
  • 查看内存使用趋势
  • 识别内存分配热点

内存分析 ​

  • 查看对象的引用关系
  • 识别未释放的对象
  • 分析内存使用模式

7. Application 面板 ​

功能：

  • 查看和管理存储数据
  • 查看和修改 Cookies
  • 查看和修改 localStorage 和 sessionStorage
  • 查看缓存数据

常用功能：

存储管理 ​

  • 查看和修改 Cookies
  • 查看和修改 localStorage 和 sessionStorage
  • 查看和修改 IndexedDB
  • 查看和修改 Cache Storage

服务 worker ​

  • 查看已注册的 service worker
  • 查看 service worker 的状态
  • 调试 service worker

清单文件 ​

  • 查看 web app 清单文件
  • 检查 PWA 配置

8. Security 面板 ​

功能：

  • 检查页面的安全状态
  • 查看 HTTPS 连接信息
  • 检查混合内容
  • 查看证书信息

常用功能：

安全状态 ​

  • 查看页面的安全状态：Secure、Not Secure
  • 查看 HTTPS 连接的详细信息
  • 检查证书有效性

混合内容 ​

  • 识别页面中的混合内容
  • 查看混合内容的来源

9. Lighthouse 面板 ​

功能：

  • 分析页面性能
  • 检查可访问性
  • 检查最佳实践
  • 检查 PWA 兼容性

常用功能：

运行审计 ​

  • 选择审计类型：Performance、Accessibility、Best Practices、SEO、PWA
  • 点击「Generate report」按钮
  • 查看审计结果和建议

高级调试技巧 ​

1. 条件断点 ​

功能：仅当特定条件满足时触发断点

设置方法：

  1. 右键点击行号
  2. 选择「Add conditional breakpoint」
  3. 输入条件表达式

示例：

javascript
// 仅当 i > 5 时触发断点
if (i > 5) {
  // 代码
}

2. 日志点 ​

功能：在不中断代码执行的情况下输出日志

设置方法：

  1. 右键点击行号
  2. 选择「Add log point」
  3. 输入日志表达式

示例：

javascript
// 输出变量值
console.log('i:', i)

3. 异常断点 ​

功能：当代码抛出异常时触发断点

设置方法：

  1. 在 Sources 面板中点击「Pause on exceptions」按钮
  2. 选择「Pause on caught exceptions」或「Pause on uncaught exceptions」

4. DOM 变更断点 ​

功能：当 DOM 元素发生变化时触发断点

设置方法：

  1. 在 Elements 面板中选择元素
  2. 右键点击，选择「Break on」
  3. 选择触发条件：Subtree modifications、Attribute modifications、Node removal

5. XHR/Fetch 断点 ​

功能：当 XHR 或 Fetch 请求发生时触发断点

设置方法：

  1. 在 Sources 面板中点击「XHR/fetch breakpoints」
  2. 点击「+」按钮
  3. 输入 URL 包含的字符串

6. 黑盒脚本 ​

功能：忽略指定脚本的调试

设置方法：

  1. 在 Sources 面板中选择脚本
  2. 右键点击，选择「Blackbox script」

7. 远程调试 ​

功能：调试移动设备上的网页

设置方法：

  1. 启用设备的 USB 调试
  2. 连接设备到电脑
  3. 在 Chrome 中访问 chrome://inspect
  4. 选择设备和页面进行调试

性能优化技巧 ​

1. 页面加载性能 ​

使用 Network 面板：

  • 分析请求瀑布图
  • 识别慢请求
  • 优化资源加载顺序
  • 减少 HTTP 请求数

使用 Performance 面板：

  • 分析页面加载时间
  • 识别渲染阻塞资源
  • 优化 JavaScript 执行时间

2. 运行时性能 ​

使用 Performance 面板：

  • 分析帧率
  • 识别 JavaScript 执行瓶颈
  • 优化渲染性能
  • 减少布局和绘制操作

使用 Memory 面板：

  • 检测内存泄漏
  • 优化内存使用
  • 减少对象创建

3. 资源优化 ​

使用 Coverage 工具：

  • 分析 JavaScript 和 CSS 的使用情况
  • 识别未使用的代码
  • 减少代码体积

使用 Lighthouse：

  • 获得性能优化建议
  • 检查最佳实践
  • 提高页面加载速度

实用快捷键 ​

通用快捷键 ​

快捷键功能
F12 或 Ctrl+Shift+I打开/关闭 DevTools
Ctrl+Shift+C选择元素
Ctrl+Shift+P打开命令面板
Ctrl+[ 和 Ctrl+]在面板间切换
Esc显示/隐藏控制台

面板特定快捷键 ​

Elements 面板：

  • Up/Down：选择上/下一个元素
  • Enter：编辑选中元素
  • Delete：删除选中元素

Console 面板：

  • Ctrl+L：清空控制台
  • Up/Down：浏览历史命令

Sources 面板：

  • F8：继续执行
  • F10：单步跳过
  • F11：单步进入
  • Shift+F11：单步退出
  • Ctrl+B：切换断点启用状态

Network 面板：

  • Ctrl+R：刷新页面
  • Ctrl+E：开始/停止录制

常见问题和解决方案 ​

1. DevTools 没有响应 ​

问题：DevTools 打开后卡顿或无响应。

解决方案：

  • 关闭不必要的面板
  • 清除 DevTools 缓存
  • 重启 Chrome 浏览器
  • 更新 Chrome 到最新版本

2. 断点不触发 ​

问题：设置的断点没有触发。

解决方案：

  • 检查断点是否启用
  • 检查条件断点的条件是否满足
  • 检查代码是否被压缩或混淆
  • 尝试使用日志点代替断点

3. 网络请求不显示 ​

问题：Network 面板中没有显示网络请求。

解决方案：

  • 检查是否选择了正确的筛选器
  • 检查是否启用了网络日志
  • 刷新页面重新录制
  • 检查是否有网络请求被拦截

4. 内存分析不准确 ​

问题：Memory 面板中的内存分析结果不准确。

解决方案：

  • 多次拍摄快照进行比较
  • 确保页面没有其他活动
  • 使用不同的内存分析工具进行验证

最佳实践 ​

1. 开发流程 ​

  • 在开发过程中使用 DevTools 实时调试
  • 定期使用 Lighthouse 进行性能审计
  • 在提交代码前检查页面性能
  • 结合使用不同面板进行全面分析

2. 调试技巧 ​

  • 使用条件断点减少调试干扰
  • 使用日志点代替断点进行非侵入式调试
  • 使用黑盒脚本忽略第三方代码
  • 结合使用多个面板进行综合分析

3. 性能优化 ​

  • 定期分析页面性能并优化
  • 关注 Core Web Vitals 指标
  • 优化资源加载和执行
  • 减少不必要的 DOM 操作

总结 ​

Chrome DevTools 是 web 开发中不可或缺的工具，它提供了丰富的功能帮助开发者调试代码、分析性能、优化页面。通过熟练使用 DevTools，可以显著提高开发效率，改善用户体验。

在实际开发中，应该根据具体需求选择合适的面板和工具，结合使用多种调试技巧，不断优化代码和性能。同时，也要关注 DevTools 的更新，了解新功能和最佳实践，以保持技术的先进性。