ones.pub

vibe-codingnetwork

Vibe coding 越改越错？6 分钟看懂坏在哪

Vibe coding 时 AI 反复改代码却修不好，是因为它不知道应用坏在哪。大白话讲输入网址按下回车后的 8 站：每站会出什么错，怎么查，怎么告诉 AI。

你把报错贴给 AI，它改了一轮，没好。再贴，再改，原来能用的地方也坏了。localhost:3000 发给朋友打不开，上线后一片白屏，本地能跑一部署就报错，碰到这类问题，很容易就这样越改越错。

AI 不知道你的应用坏在哪，只能猜着改。猜错了，改到的就是本来没坏的代码。你也说不清坏在哪，因为你不知道输入网址、按下回车，到页面出现，中间发生了什么。

这趟旅程有 8 站，分成三段：你的电脑，网络，服务器。出问题时先判断坏在哪一站，再让 AI 去改。全文 6 分钟能读完，没时间就先看这份速查：

  • localhost 发给朋友打不开：第 3 站。localhost 只指你自己的电脑，部署上线别人才能访问。
  • 域名绑好了却打不开：第 3 站。先等几分钟，再回平台核对解析记录。
  • port 3000 is already in use：第 4 站。上次启动的程序还没关。
  • 证书警告：第 5 站。刚绑域名的话，等平台把证书办完。
  • 404、500、502：第 6 站。先看状态码的第一位数字。
  • 本地能跑，上线就坏：第 7 站。服务器上没有你的 .env，去平台配环境变量。
  • 白屏：第 8 站。打开 Console 看红字。
  • API key 能不能写在前端：第 8 站。不能，前端代码谁都看得到。

下面用大白话把 8 站走一遍，不用有计算机基础。例子用我自己的博客 ones.pub。

第 1 站 键盘到浏览器：这一层很少坏

你按下回车。键盘把这次按键变成一个编号发给电脑，操作系统看一眼哪个窗口在最前面，把“回车被按了”转交给浏览器。

往细了讲还有 USB 电路、中断这些，都不用记。带走一个想法就够了：计算机是一层一层搭起来的，每一层只管自己那点事，做完往上交。 后面每一站都是这个套路。

第 2 站 网址：每个页面、每个接口都是一个地址

浏览器拿到 https://ones.pub/，拆成三段：

  • https 是协议，双方按什么规矩说话。
  • ones.pub 是域名，要找的是谁。
  • / 是路径，要他家的哪一页。

你会在哪碰到它：AI 说“请求 /api/users 失败”，指的就是某个域名下的这条路径。把完整地址和报错一起发给它。

第 3 站 DNS：为什么 localhost 发给朋友打不开

网络上的机器互相只认 IP 地址，一串数字，像电话号码。域名是给人看的，浏览器得先把它换成 IP，这套查号系统叫 DNS。ones.pub 查出来是 104.21.50.50 和 172.67.157.29，浏览器挑一个去连。

查号是由近到远一级一级问的，每一级都会把结果记一阵子，下次不用再问。

你会在哪碰到它：

  • localhost 是个特殊的名字，永远指向“我自己这台电脑”。localhost:3000 你能打开，朋友打不开，因为朋友的 localhost 是朋友自己的电脑。想让别人访问，得把应用部署到线上。
  • 域名刚绑好却打不开。先等几分钟，各级 DNS 记下新结果要一点时间。等了还不行，回平台核对解析记录有没有填对。

第 4 站 连接：端口被占用是怎么回事

有了 IP 还要一个端口。IP 是大楼地址，端口是房间号：一台机器上同时跑着很多程序，每个程序守一个端口。网页默认走 443（https）或 80（http），所以平时不用写。

两台机器先互相确认一遍“在吗？在。那开始”，连接就建好了，这叫 TCP。数据会切成小包一跳一跳传过去，路上丢了 TCP 会重发，这些不用你操心。

你会在哪碰到它：

  • 本地开发时的 localhost:3000、:5173、:8080，冒号后面就是端口。
  • 报错 port 3000 is already in use，意思是这个房间已经有程序住着了，通常是你上次启动的那个还没关。关掉它，或者换个端口。

第 5 站 TLS：证书警告从哪来

https 里的 s 说的就是这一步。说正事之前，服务器先出示证书证明“我真的是 ones.pub”。浏览器验过以后，双方商量出一把只有彼此知道的钥匙，之后的内容全部加密，路上谁截到都是乱码。

你会在哪碰到它：地址栏的小锁，还有“您的连接不是私密连接”的警告。Vercel、Cloudflare 这类托管平台会自动替你办证书、续证书。域名刚绑上就看到警告，多半是平台还没办完，等几分钟再试。

第 6 站 HTTP：404、500、502 怎么读

连接和加密都好了，浏览器发出请求，第一行大意是 GET /。GET 是“我要拿东西”，提交表单、保存数据用的是 POST。/ 是要哪一页。服务器回信的第一行是状态码，这是 ones.pub 真实回复的开头：

HTTP/2 200
content-type: text/html
server: cloudflare

状态码先看第一位数字：

  • 2xx 成功。200 是一切正常。
  • 3xx 换个地方拿。301 和 302 是东西搬家了，304 是你本地存的那份还能用。
  • 4xx 请求本身有问题。404 是这个地址不存在，401 和 403 是没登录或没权限。
  • 5xx 服务器那边出了问题。500 是服务器上的代码出错了，502 是门口接待的程序在，后面真正干活的程序没回应。

你会在哪碰到它：天天碰到。你的应用调任何接口，包括调 AI 的 API，走的都是 HTTP。在页面上点右键选“检查”，打开开发者工具（Windows 上按 F12 也行），切到 Network（网络）面板，每一次请求和它的状态码都列在那里。跟 AI 描述问题时带上状态码，比一句“打不开”有用得多。

第 7 站 服务器：为什么本地能跑，上线就坏

请求到了服务器。那里有个一直在等活的程序，它看请求要的是哪条路径、这个人有没有权限，然后交给对应的代码去处理：查数据库，算结果，拼出一个页面或一段数据，原路发回去。AI 帮你写的“后端”就跑在这里。

你会在哪碰到它：

  • 这是另一台机器。 没跟着代码一起传上去的东西，比如本地的 .env 文件、密钥、你电脑上装的数据库，它都没有。“本地能跑，上线就坏”大多出在这里。把 .env 里的每一项填到托管平台的“环境变量”页面里。
  • 用户看不到这里的代码，所以密钥和数据库密码只能放在这一侧。

第 8 站 渲染：白屏，和不能写进前端的 key

浏览器收到的是一份 HTML，纯文本。它先读 HTML 搭出页面骨架，再去下载里面提到的 CSS、图片和 JavaScript，每个文件都是一次新的请求。然后按 CSS 排好版画到屏幕上，最后运行 JavaScript，页面才能点、能输入、能不刷新就更新内容。

你会在哪碰到它：

  • 白屏。HTML 写错了，浏览器会猜你的意思接着画。JavaScript 出了错，那段脚本就停在那里，所以白屏多半是 JavaScript 的问题。打开开发者工具的 Console（控制台），把红字整段复制给 AI。
  • 前端代码是公开的。 HTML、CSS、JavaScript 都是发到用户浏览器里运行的，任何人打开开发者工具都能看到。API key 写在前端，等于贴在大街上。要花钱的 API 放到后端去调。

让 AI 别再越改越错：告诉它三件事

拿不准是哪一站，先分清是哪一段。白屏和 Console 里的红字在你的电脑这一段，要改的是前端代码。域名打不开和证书警告在网络这一段。5xx 和“本地能跑，上线就坏”在服务器这一段。

然后告诉 AI：

  1. 坏在哪一站，或者哪一段，让它只改这一处。
  2. 你看到了什么：状态码、Console 里的红字、报错原文。
  3. 本地是不是正常，最近改过什么。

这样它知道该去哪里找，不会再去动没坏的代码。

这 8 站的路线来自 GitHub 上一个 4 万多 star 的仓库 what-happens-when。它是写给工程师看的，从键盘电路一路讲到显卡，七百多行，也有简体中文翻译。想看完整细节可以去读原文。

你 vibe coding 时卡得最久的是哪一站？回复告诉我，我接着写那一站。