做出来以后:自己测、报 bug、让它修
乱输入显示「undefined -20745 天」。第一次报 bug 修好一半,指到具体那一行后全部修好。
AI 写的代码最常见的问题不是打不开,而是正常用没事,换个用法就出错。这篇接着上一篇的倒数日网页,我们自己测、报 bug、让它修。结果:第一次报 bug,它只修好了一半;第二次把出问题的那一行指给它,两个都修好了。
实测:本地 qwen2.5:3b(3B 小模型,Ollama,temperature 0,seed 42),2026-10-19 运行;输出原样贴出,未修改。 每一版都在 Chrome(390px 宽)里用自动脚本点按钮、输入内容测试,截图为实际结果。
01 · Test像用户一样测
测试不需要懂代码,只要想三类情况:
- 正常用:按说明输入「2027-01-01 春节」。
- 乱用:不按格式,输入「明年元旦」。
- 刷新:改完后刷新页面,看它还记不记得。
02 · Bugs测出的两个 bug


Bug 1:「7岁生日」被写死在句子里,换成春节也照样显示。Bug 2:格式不对时它照单全收,存进去一个无效日期,显示出 undefined 和负两万天。刷新后它确实记得新目标——这一项是好的。
03 · Round 1第一次报 bug
我在浏览器里测试了,发现两个问题: 1. 输入「2027-01-01 春节」后,页面显示「距离春节 7岁生日还有 74 天」。新目标不是生日,应该显示「距离春节还有 N 天」,不要带「7岁生日」。 2. 输入一个格式不对的内容,比如「明年元旦」,页面显示「距离undefined 7岁生日还有 -20745 天」。格式不对时应该提示「日期格式不对,请按 2027-01-01 春节 这样输入」,并且不保存。 只修这两个问题,其余保持不变,输出修改后的完整代码,不要解释。
按「输入了什么 → 看到什么 → 应该是什么」写清楚了。测试第三版:
看代码能找到原因:它加了一段 else 提示,但判断条件 if (newTargetDate) 没改。无效日期在 JavaScript 里也算「真」,所以永远走不到提示那一步。
04 · Round 2第二次:指到具体那一行
(先贴上当前完整代码)
还有两个问题,我已经定位到具体的行:
1. `if (newTargetDate)` 这一行:日期无效时 new Date() 返回 Invalid Date,它也算真值,所以永远进不了 else。请改成 `if (name && !isNaN(newTargetDate))`。
2. 最后一个 script 里的 `距离${data.name} ${daysLeft} 天` 少了「还有」,改成 `距离${data.name}还有 ${daysLeft} 天`。
只改这两行,输出完整代码,不要解释。这一次它只改了这两行,其余一个字没动(我们逐行对比过两版代码)。
05 · Final最终版

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒数日</title>
<style>
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
font-size: 2em;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<h1 id="daysLeft"></h1>
<button id="changeDateBtn">换一个目标日</button>
</div>
<script>
const targetDate = new Date('2026-12-06');
const now = new Date();
const difference = targetDate - now;
const daysLeft = Math.ceil(difference / (1000 * 60 * 60 * 24));
document.getElementById('daysLeft').innerText = `距离小宇 7 岁生日还有 ${daysLeft} 天`;
document.getElementById('changeDateBtn').addEventListener('click', function() {
const inputDate = prompt('请输入新日期(格式 2027-01-01 春节)');
if (inputDate) {
const [newDate, name] = inputDate.split(' ');
const newTargetDate = new Date(newDate);
if (name && !isNaN(newTargetDate)) {
localStorage.setItem('targetDate', JSON.stringify({date: newTargetDate, name}));
location.reload();
} else {
alert('日期格式不对,请按 2027-01-01 春节 这样输入');
}
}
});
</script>
<script>
if (localStorage.getItem('targetDate')) {
const data = JSON.parse(localStorage.getItem('targetDate'));
const targetDate = new Date(data.date);
const now = new Date();
const difference = targetDate - now;
const daysLeft = Math.ceil(difference / (1000 * 60 * 60 * 24));
document.getElementById('daysLeft').innerText = `距离${data.name}还有 ${daysLeft} 天`;
}
</script>
</body>
</html>06 · Template报 bug 的格式
我在【浏览器 / 手机】上测试,发现【N】个问题: 1. 我【做了什么 / 输入了什么】,页面显示【实际看到的】,应该是【期望的】。 2. …… 只修这些问题,其余保持不变,输出修改后的完整代码。 (修了一次还不对:把出问题的那一行代码贴出来,直接说改成什么。)
07 · Limits真实边界
· 第二次能修好,很大程度上是因为我们自己看懂了原因、直接给出了改法。不懂代码的读者可以把「实际看到 / 期望」写清楚,再要求它「先解释为什么会这样,再修」;这个做法本文没有实测。
· 最终版仍有上一篇提到的时区问题,也没有「恢复默认」按钮;只在 Chrome 里测试过。
08 · Next下一步
会做小东西了,下一站换个方向:让 AI 帮你读材料、查资料,以及怎么识破它编出来的东西。
这是「03 做第一个小作品」的第 2/2 篇。实测原始记录随站点源码保存(src/runs.json)。