AI 编程 · 第五章：工具与准备工作
浏览器开发者工具入门
F12 是你看代码实际干了什么的窗口
入门约 12 分钟工具
浏览器开发者工具入门
每个浏览器都有一套隐藏的"开发者工具"，是查看网页内部结构的神器。
打开开发者工具
- Chrome/Edge：按 F12，或右键页面 → 检查
- Safari：先在偏好设置中开启"开发"菜单，再按 Cmd+Option+I
你能看到什么？
打开后你会看到几个标签页：
- Elements（元素）——网页的 HTML 结构，你可以实时修改文字和样式
- Console（控制台）——显示 JavaScript 的日志和错误信息
- Sources（源代码）——网页的原始文件
- Network（网络）——网页加载了什么文件
实际用途
对 Vibe Coding 学习者来说，开发者工具最有用的功能是：
- 查看错误：如果页面出问题， Console 里会有红色报错信息，把这信息发给 AI 帮你分析
- 临时修改：在 Elements 里双击文字可以临时修改，刷新后恢复（用来测试想法）
- 调试代码： AI 生成的代码跑不起来？打开 Console 看报错，粘贴给 AI
常见误区
"开发者工具看起来好复杂，我是不是学不会？"——你不需要全部搞懂。现阶段只需要知道：打开 F12 → 找到 Console → 把红色的报错信息复制给 AI。
要点总结
- F12 打开开发者工具
- Console 标签页查看错误信息
- 报错信息发给 AI 帮你分析
- 现阶段会用 Console 就够了
学习助手（可选）
需要时可以提问；没配 AI 也不影响课程、练习和测验。
学习助手需要时再用
助手说：你好，我是课程里的可选学习助手。正文、练习和进度都在这里，不需要我也能继续。
卡住时，把具体的一段代码或一句话贴过来就好。我们可以一起拆概念、改描述，或者把一个小想法拆成几步来做。
这一课以阅读为主。想看概念演示可以去 可视化演示。
AI 编程 · 同轨道下一节做一个个人主页