打开开发者工具
按 F12 或 Ctrl + Shift + I 即可打开 Chrome 开发者工具（DevTools）。这是 Web 开发者最强大的调试和优化工具之一。
Elements 面板 - DOM 检查器
Elements 面板让你查看和编辑 DOM 结构：
- 实时编辑 HTML：双击元素即可修改
- CSS 样式调试：查看和修改所有CSS规则
- Box Model 可视化：查看margin、padding、border
- 事件监听器：查看绑定到元素的事件
- 截图功能：捕获单个元素或整个页面
Console 面板 - JavaScript 控制台
Console 是调试 JavaScript 的核心工具：
- console.log()：输出调试信息
- console.table()：表格形式显示数据
- console.time()：测量代码执行时间
- 实时 JavaScript 执行：直接在控制台运行代码
- 错误追踪：显示详细的错误堆栈信息
Sources 面板 - 调试器
强大的 JavaScript 调试功能：
- 断点调试：在代码行设置断点
- 单步执行：Step over、Step into、Step out
- Watch 表达式：监视变量值变化
- Call Stack：查看函数调用栈
- 本地存储编辑：修改 localStorage 和 sessionStorage
Network 面板 - 网络监控
分析网络请求和性能：
- 请求详情：查看Headers、Preview、Response、Timing
- 瀑布图：可视化资源加载时间线
- 过滤请求：按类型、域名过滤
- 网络限速：模拟 3G/4G 网络
- 导出 HAR：保存网络活动日志
Performance 面板 - 性能分析
诊断性能瓶颈：
- 录制性能：捕获页面加载和运行时性能
- 火焰图：可视化函数调用关系
- FPS 监控：检查帧率问题
- 内存分析：识别内存泄漏
- CPU 占用：查看哪些任务占用最多CPU
Application 面板 - 存储管理
管理应用数据和缓存：
- localStorage：查看和编辑本地存储
- sessionStorage：会话存储管理
- Cookies：查看、编辑、删除 Cookie
- IndexedDB：浏览器数据库
- Service Workers：PWA 调试
- Cache Storage：缓存管理
Lighthouse - 自动化审计
生成网站质量报告：
- 性能评分：页面加载性能
- 可访问性：无障碍设计检查
- 最佳实践：Web 开发最佳实践
- SEO：搜索引擎优化建议
- PWA：渐进式 Web 应用检查
实用技巧
- 设备模拟：Ctrl + Shift + M 切换移动设备模式
- 命令面板：Ctrl + Shift + P 打开命令搜索
- 截图：命令面板搜索"screenshot"
- 深色主题：Settings > Preferences > Theme
- Snippets：保存常用代码片段