打开开发者工具
按 F12 或 Ctrl + Shift + I 打开 Chrome DevTools，这是前端开发者最强大的调试工具。
Elements 面板
实时查看和修改 HTML 和 CSS，检查元素样式，调试布局问题。
Console 面板
运行 JavaScript 代码，查看日志输出，调试 JS 错误。使用 console.log()、console.table() 等方法。
Network 面板
分析网络请求，查看资源加载时间，优化页面性能。
Performance 面板
录制和分析页面性能，找出性能瓶颈，优化加载和运行速度。
移动设备调试
按 Ctrl + Shift + M 切换设备模拟，测试响应式设计。
总结
掌握 Chrome DevTools 是前端开发的必备技能。从简单的元素检查到复杂的性能分析，DevTools 提供了全方位的开发调试功能。