谷歌浏览器（Chrome）提供了强大的开发者工具来调试网页，以下是详细的使用指南

🔧 开启开发者工具

快捷方式

• F12 键直接打开
• Ctrl+Shift+I（Windows/Linux）
• Cmd+Option+I（Mac）
• 右键点击页面 → "检查"

📋 主要功能面板

Elements（元素）面板

• 查看和编辑 HTML/CSS
• 实时修改样式（右侧 Styles 面板）
• 查看盒模型、计算样式
• 小技巧：点击元素选择器图标（左上角箭头）可选中页面元素

Console（控制台）面板

• 运行 JavaScript 代码
• 查看日志、错误、警告
• 输入 console.log() 等调试信息

Sources（源代码）面板

• 断点调试：点击行号设置断点
• 调试工具栏：
  • ▶️ 继续执行
  • ⏸️ 暂停
  • ⏭️ 单步跳过
  • ⏬ 单步进入
  • ⏫ 单步跳出
• Watch（监视）：添加监视表达式
• Call Stack（调用栈）：查看函数调用链

Network（网络）面板

• 监控所有网络请求
• 查看请求头、响应、时间线
• 过滤请求类型（XHR、JS、CSS等）
• 模拟慢速网络：点击 "Online" 下拉选择节流

Application（应用）面板

• 管理 LocalStorage、SessionStorage
• 查看和编辑 Cookies
• 检查 Service Workers

🔍 实用调试技巧

DOM 断点

1. 在 Elements 面板右键元素
2. 选择 Break on →
   • Subtree modifications
   • Attribute modifications
   • Node removal

事件监听器断点

1. 进入 Sources 面板
2. 展开右侧 "Event Listener Breakpoints"
3. 勾选需要监听的事件类型

移动端调试

• 设备模拟：点击切换设备图标（📱）
• 响应式设计模式：Ctrl+Shift+M
• 连接真机调试：
  1. 手机开启 USB 调试
  2. Chrome 访问 chrome://inspect/#devices
  3. 选择设备进行调试

性能分析

• Performance 面板：记录页面运行性能
• Memory 面板：检测内存泄漏
• Lighthouse：生成性能报告

🎯 快捷键速查

功能	Windows/Linux	Mac
搜索文件	Ctrl+P	Cmd+P
搜索文本	Ctrl+F	Cmd+F
切换面板	Ctrl+[ / ]	Cmd+[ / ]
清空控制台	Ctrl+L	Cmd+K
强制刷新	Ctrl+Shift+R	Cmd+Shift+R

💡 高级功能

Workspaces（工作区）

将本地文件夹映射到 Sources 面板，实现实时保存修改：

1. Sources → Filesystem → Add folder to workspace
2. 授权访问

条件断点

右键行号 → "Add conditional breakpoint" 可设置表达式，当为 true 时才暂停

Snippets（代码片段）

Sources → Snippets → 新建 保存常用调试代码片段，随时执行

命令菜单

Ctrl+Shift+P（Windows）/ Cmd+Shift+P（Mac） 可快速执行各种命令，如截屏、切换主题等

🚨 常见问题排查

1. 页面不更新：

   • 禁用缓存：Network 面板勾选 "Disable cache"
   • 硬刷新：Ctrl+F5

2. 断点不生效：

   • 确保代码未压缩（使用 source maps）
   • 检查是否为异步代码

3. 查看变量值：

   • 鼠标悬停变量名
   • 控制台输入变量名
   • 添加到 Watch 表达式

掌握这些调试技巧能极大提升开发效率,建议多实践熟悉各个功能！

标签： Chrome 开发者工具