Appearance
理解 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 说：
text
打开 index.html 后是白屏，什么都不显示。
浏览器控制台的错误信息：
[粘贴控制台的红色错误信息]
请帮我检查并修复。问题 2：样式不对（布局乱了）
可能原因：
- CSS 文件没加载
- 样式冲突
- 响应式没有正确处理
怎么跟 AI 说：
text
页面功能正常，但是布局有问题：
- 导航栏和主内容区重叠了
- 卡片没有按网格排列，变成了垂直堆叠
- 手机端侧边栏没有隐藏
请修复这些布局问题。问题 3：点击没反应
可能原因：
- JavaScript 的事件绑定有问题
- 元素被其他元素遮挡了（z-index 问题）
- 函数有 bug
怎么跟 AI 说：
text
点击"提交"按钮后没有任何反应。
控制台显示：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
期望的行为是：点击后弹出"提交成功"的提示。
请修复。问题 4：图片不显示
可能原因：
- 图片路径不对
- 图片文件不存在
- 路径大小写不匹配（macOS 不区分大小写，但服务器区分）
怎么跟 AI 说：
text
页面上的图片全都显示不出来，显示的是裂开的图标。
我的图片放在项目的 images 文件夹下。
请检查所有图片引用路径是否正确。问题 5：手机端显示异常
怎么跟 AI 说：
text
在电脑上看是正常的，但手机上看有以下问题：
1. 文字太小，几乎看不清
2. 图片超出屏幕宽度，需要左右滚动
3. 导航菜单没有折叠
4. 按钮太小，不容易点击
请针对手机端（<768px）做适配。问题 6：API 调用失败
怎么跟 AI 说：
text
天气查询功能不工作。输入城市名后没有显示任何结果。
打开 Network 标签看到请求返回了 401 错误。
我确认 API Key 已经填了。
请帮我检查 API 调用的 URL 和参数是否正确。调试的核心方法论
"复制粘贴大法"
这是 Vibe Coding 调试的核心方法，适用于 90% 的情况：
text
1. 打开浏览器控制台（F12）
2. 发现红色错误
3. 选中错误信息，复制
4. 粘贴给 AI
5. 告诉 AI 你期望的行为 vs 实际发生了什么
6. 让 AI 修复
7. 刷新页面验证
8. 还有问题？重复 2-7就这么简单。不需要你理解错误信息，AI 能看懂。
给 AI 描述问题的万能模板
text
【问题描述】
[用你自己的话描述出了什么问题]
【错误信息】
[粘贴控制台的错误，如果有的话]
【期望行为】
[描述你想要的正确表现]
【实际行为】
[描述现在实际发生了什么]
【操作步骤】
1. [你做了什么操作]
2. [然后发生了什么]完整案例
text
【问题描述】
暗色模式切换功能不正常
【错误信息】
控制台没有报错
【期望行为】
点击导航栏右上角的月亮图标，整个页面应该从亮色切换到暗色。
再次点击切换回来。切换后的偏好应该保存，刷新后不丢失。
【实际行为】
点击月亮图标后，只有导航栏变成了暗色，页面主体还是亮色。
而且刷新页面后恢复成了亮色。
【操作步骤】
1. 打开页面（默认亮色模式）
2. 点击右上角的月亮图标
3. 只有导航栏变暗，其他区域没变
4. 刷新页面后所有区域恢复亮色这样描述问题，AI 能精准定位和修复。描述得越清楚，修得越快。
基础 HTML 结构速览
虽然你不需要写代码，但了解 HTML 的基本结构能让你更好地跟 AI 沟通：
html
<!-- 一个网页的基本结构 -->
<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 |