代码写完了，页面显示不对？按钮点了没反应？API 调用失败？别慌——浏览器自带的开发者工具（DevTools）就是你的「X 光机」，按 F12 就能打开。

浏览器开发者工具（DevTools）是前端开发必备工具，按 F12 或 Cmd+Option+I 打开。它包含多个面板：Elements（查看/修改 HTML 和 CSS）、Console（运行 JS、查看错误）、Network（监控网络请求）、Application（管理本地存储）等。

DevTools 面板探索

页面上的 API 请求返回了错误，应该用 DevTools 的哪个面板排查？

• Elements
• Console
• Network
• Application

知道了各面板的功能，关键是遇到问题时能快速选对工具。来做几道场景题，训练你的 Debug 直觉——

Debug 挑战

AI 编程中 DevTools 的妙用：在 Console 中粘贴 AI 生成的 JS 代码快速测试；用 Network 面板抓取 API 请求格式，复制给 AI 让它帮你写代码；用 Elements 面板找到页面元素的选择器，告诉 AI「修改这个 className 的样式」。

DevTools 是连接你和 AI 的桥梁——你用它发现问题，把错误信息复制给 AI，AI 帮你修复。这种人机协作的调试方式，比任何一方单独工作都高效。