12.5 调试循环实战

红屏不恐慌

如果你是编程新手，遇到错误提示时第一反应可能是慌张——满屏的英文错误信息、看不懂的堆栈跟踪、浏览器控制台里的红色警告。

在 Vibe Coding 中，你的应对方式很简单：

看到错误 → 复制错误信息 → 贴回 Claude Code → 让 AI 修复。

不恐慌，不瞎猜，不问 ChatGPT"这是什么意思"。你只需要做搬运工。

如何打开浏览器控制台：

• Chrome/Edge：按 F12 或 Ctrl+Shift+I，切换到 Console 标签
• Firefox：按 F12 或 Ctrl+Shift+I
• Safari：先启用"开发"菜单（偏好设置 → 高级 → 显示开发菜单），然后 Cmd+Option+C

控制台是你调试时最重要的信息来源。所有错误信息都会在这里显示。

常见的调试循环

在实际开发过程中，你会反复经历这个循环：

运行 → 出错 → 复制错误 → AI 修复 → 重新运行 → 确认通过

看起来简单，但这个循环比你想象的强大。下面是在 MP3-Visualization 项目中可能遇到的真实场景。

场景 1：AudioContext 未启动

错误信息：

Uncaught (in promise) DOMException: The AudioContext was not allowed to start.

你的操作：

将错误信息完整复制，回到 Claude Code 终端，输入：

"浏览器报了这个错误：Uncaught (in promise) DOMException: The AudioContext was not allowed to start. 怎么修复？"

AI 会解释这是浏览器的自动播放策略——用户交互之前不允许音频自动播放。修复方案是：在用户点击"播放"按钮时才创建或恢复 AudioContext。

场景 2：Canvas 尺寸不对

你的描述：

"可视化画布显示变形了，柱状条被拉伸了，看起来比例不对。"

AI 会检查 Canvas 的 CSS 尺寸和属性尺寸是否一致，然后修复：

// 修复前
canvas.width = 800;
canvas.height = 400;

// 修复后
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

这个问题通常出现在 Canvas 的 CSS 尺寸和实际绘制尺寸不匹配时。AI 会把 width/height 属性设置为 CSS 尺寸。

场景 3：录制无声

你的描述：

"录制下来的视频没有声音，画面正常。"

AI 会检查 MediaRecorder 的配置，发现没有将音频流传递给 MediaRecorder。修复方案：用 Canvas.captureStream(30) 获取画面流，用 AudioContext.createMediaStreamDestination() 获取音频流，然后合并。

场景 4：文件路径错误

你的描述：

"打开 index.html 时在浏览器中看到空白页面，控制台报 404 错误。"

AI 会检查你的文件引用路径。常见问题：