理解 AI 的输出：代码审查与调试

为什么需要这一章？

虽然 Vibe Coding 的核心是"不用看代码"，但有时候你需要基本的判断力来识别问题。这不是让你学编程，而是让你成为一个更好的指挥官——至少能看懂"战况报告"。

你不需要读懂代码，但需要读懂"信号"

信号一：浏览器的表现

打开你的页面后，看这些：

检查项	正常信号	异常信号
页面加载	几秒内显示完整内容	白屏、一直转圈、部分内容缺失
布局	各元素位置正确、对齐	元素重叠、错位、溢出屏幕
交互	点击按钮有预期反应	点了没反应、反应不对
响应式	缩小窗口布局自动调整	缩小后布局破碎、文字溢出
控制台	没有红色报错	有红色错误信息
图片	所有图片正常显示	图片裂开、不显示
文字	文字可读、大小合适	文字太小、颜色和背景混在一起

信号二：浏览器控制台

这是你最重要的"仪表盘"。打开方法：

• Windows/Linux：按 F12 或 Ctrl + Shift + I
• macOS：按 Cmd + Option + I

然后点击 Console（控制台）标签。

你会看到三种颜色的信息：

• 🔴 红色信息（Error）：出了大问题，需要修复。最常见的比如 Uncaught TypeError、404 Not Found 等
• 🟡 黄色信息（Warning）：有些小问题，通常可以忽略
• ⚪ 白色/灰色信息（Log）：普通日志，开发者自己打印的调试信息，不用管

💡 你不需要理解这些错误信息的含义。你只需要把红色的信息复制给 AI，让 AI 帮你修。AI 能看懂这些报错。

信号三：网络请求

如果你的项目有 API 调用（比如天气查询案例），可以在开发者工具中点击 Network（网络）标签：

• 红色的请求 = 失败了（常见原因：API Key 不对、地址写错、网络问题）
• 绿色/白色的请求 = 成功了

常见问题及处理方式

问题 1：页面白屏

可能原因：

• HTML 文件路径不对
• JavaScript 有语法错误导致页面崩溃
• CSS 文件没有正确引用

怎么跟 AI 说：

打开 index.html 后是白屏，什么都不显示。
浏览器控制台的错误信息：
[粘贴控制台的红色错误信息]

请帮我检查并修复。

问题 2：样式不对（布局乱了）

可能原因：

• CSS 文件没加载
• 样式冲突
• 响应式没有正确处理

怎么跟 AI 说：

页面功能正常，但是布局有问题：
- 导航栏和主内容区重叠了
- 卡片没有按网格排列，变成了垂直堆叠
- 手机端侧边栏没有隐藏

请修复这些布局问题。

问题 3：点击没反应

可能原因：

• JavaScript 的事件绑定有问题
• 元素被其他元素遮挡了（z-index 问题）
• 函数有 bug

怎么跟 AI 说：

点击"提交"按钮后没有任何反应。
控制台显示：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
期望的行为是：点击后弹出"提交成功"的提示。
请修复。

问题 4：图片不显示

可能原因：

• 图片路径不对
• 图片文件不存在
• 路径大小写不匹配（macOS 不区分大小写，但服务器区分）

怎么跟 AI 说：

页面上的图片全都显示不出来，显示的是裂开的图标。
我的图片放在项目的 images 文件夹下。
请检查所有图片引用路径是否正确。

问题 5：手机端显示异常

怎么跟 AI 说：

在电脑上看是正常的，但手机上看有以下问题：
1. 文字太小，几乎看不清
2. 图片超出屏幕宽度，需要左右滚动
3. 导航菜单没有折叠
4. 按钮太小，不容易点击

请针对手机端（<768px）做适配。

问题 6：API 调用失败

怎么跟 AI 说：

天气查询功能不工作。输入城市名后没有显示任何结果。
打开 Network 标签看到请求返回了 401 错误。
我确认 API Key 已经填了。
请帮我检查 API 调用的 URL 和参数是否正确。

调试的核心方法论

"复制粘贴大法"

这是 Vibe Coding 调试的核心方法，适用于 90% 的情况：

1. 打开浏览器控制台（F12）
2. 发现红色错误
3. 选中错误信息，复制
4. 粘贴给 AI
5. 告诉 AI 你期望的行为 vs 实际发生了什么
6. 让 AI 修复
7. 刷新页面验证
8. 还有问题？重复 2-7

就这么简单。不需要你理解错误信息，AI 能看懂。

给 AI 描述问题的万能模板

【问题描述】
[用你自己的话描述出了什么问题]

【错误信息】
[粘贴控制台的错误，如果有的话]

【期望行为】
[描述你想要的正确表现]

【实际行为】
[描述现在实际发生了什么]

【操作步骤】
1. [你做了什么操作]
2. [然后发生了什么]

完整案例

【问题描述】
暗色模式切换功能不正常

【错误信息】
控制台没有报错

【期望行为】
点击导航栏右上角的月亮图标，整个页面应该从亮色切换到暗色。
再次点击切换回来。切换后的偏好应该保存，刷新后不丢失。

【实际行为】
点击月亮图标后，只有导航栏变成了暗色，页面主体还是亮色。
而且刷新页面后恢复成了亮色。

【操作步骤】
1. 打开页面（默认亮色模式）
2. 点击右上角的月亮图标
3. 只有导航栏变暗，其他区域没变
4. 刷新页面后所有区域恢复亮色

这样描述问题，AI 能精准定位和修复。描述得越清楚，修得越快。

基础 HTML 结构速览

虽然你不需要写代码，但了解 HTML 的基本结构能让你更好地跟 AI 沟通：

<!-- 一个网页的基本结构 -->
<html>
  <head>
    <!-- 页面标题、引入 CSS 等（用户看不见） -->
    <title>我的网站</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- 页面可见内容 -->
    <header>导航栏</header>
    <main>主要内容</main>
    <footer>页脚</footer>
    
    <!-- 引入 JavaScript -->
    <script src="script.js"></script>
  </body>
</html>

你只需要知道：

• <head> 里放设置（标题、引入文件等），用户看不见
• <body> 里放内容，用户能看见
• .css 文件管样式（颜色、大小、位置、动画）
• .js 文件管交互（点击、输入、数据处理）

基础 CSS 属性速览

你可能会想微调一些简单的样式。最常用的 CSS 属性：

属性	作用	举例	日常沟通
color	文字颜色	color: #333	"把文字改成深灰色"
background	背景	background: #f5f5f5	"背景换成浅灰"
font-size	文字大小	font-size: 16px	"字号改成 16px"
padding	内间距	padding: 20px	"里面的空白多一些"
margin	外间距	margin: 10px	"跟旁边的元素隔开一些"
border-radius	圆角	border-radius: 8px	"加点圆角"
width / height	宽高	width: 100%	"宽度占满"
display: flex	弹性布局	-	"横排排列"
gap	间距	gap: 12px	"元素之间隔 12px"
opacity	透明度	opacity: 0.5	"变成半透明"

💡 即使不写代码，知道这些词是什么意思，跟 AI 沟通时会更精准。比如你可以说"把 padding 从 20px 改成 32px"而不是"四周的空白再多一些"——越精确，AI 越不容易改错。配合 提示词工程入门 一起看，效果会更明显。

小结

要点	说明
不用读代码	只需读懂"信号"（页面表现 + 控制台颜色）
控制台是关键	红色 = 错误，复制给 AI 就行
描述问题要清楚	用模板：期望 vs 实际 + 操作步骤
基础知识加分	了解 HTML/CSS 基本概念能让沟通更高效
不要怕出 bug	出 bug 是正常的，关键是会把问题丢给 AI

继续阅读

• 提示词工程入门：让 AI 听懂你的话
• 天气查询小工具完整开发实录
• Codex 常见问题与解决方案