浏览器开发者工具入门

浏览器开发者工具入门

每个浏览器都有一套隐藏的"开发者工具"，是查看网页内部结构的神器。

打开开发者工具

• Chrome/Edge：按 F12，或右键页面 → 检查
• Safari：先在偏好设置中开启"开发"菜单，再按 Cmd+Option+I

你能看到什么？

打开后你会看到几个标签页：

1. Elements（元素）——网页的 HTML 结构，你可以实时修改文字和样式
2. Console（控制台）——显示 JavaScript 的日志和错误信息
3. Sources（源代码）——网页的原始文件
4. Network（网络）——网页加载了什么文件

实际用途

对 Vibe Coding 学习者来说，开发者工具最有用的功能是：

• 查看错误：如果页面出问题， Console 里会有红色报错信息，把这信息发给 AI 帮你分析
• 临时修改：在 Elements 里双击文字可以临时修改，刷新后恢复（用来测试想法）
• 调试代码： AI 生成的代码跑不起来？打开 Console 看报错，粘贴给 AI

常见误区

"开发者工具看起来好复杂，我是不是学不会？"——你不需要全部搞懂。现阶段只需要知道：打开 F12 → 找到 Console → 把红色的报错信息复制给 AI。

要点总结

• F12 打开开发者工具
• Console 标签页查看错误信息
• 报错信息发给 AI 帮你分析
• 现阶段会用 Console 就够了