Station 03 · Article 2/2

做出来以后:自己测、报 bug、让它修

乱输入显示「undefined -20745 天」。第一次报 bug 修好一半,指到具体那一行后全部修好。

GUSTS.AI 编辑部2026.10.19约 3 分钟读完难度 入门含 真实运行 记录#网页#追问#核对

AI 写的代码最常见的问题不是打不开,而是正常用没事,换个用法就出错。这篇接着上一篇的倒数日网页,我们自己测、报 bug、让它修。结果:第一次报 bug,它只修好了一半;第二次把出问题的那一行指给它,两个都修好了。

实测:本地 qwen2.5:3b(3B 小模型,Ollama,temperature 0,seed 42),2026-10-19 运行;输出原样贴出,未修改。 每一版都在 Chrome(390px 宽)里用自动脚本点按钮、输入内容测试,截图为实际结果。

01 · Test像用户一样测

测试不需要懂代码,只要想三类情况:

  1. 正常用:按说明输入「2027-01-01 春节」。
  2. 乱用:不按格式,输入「明年元旦」。
  3. 刷新:改完后刷新页面,看它还记不记得。

02 · Bugs测出的两个 bug

输入春节后的截图
正常输入后:「距离春节 7岁生日还有 74 天」
输入明年元旦后的截图
乱输入后:「距离undefined 7岁生日还有 -20745 天」

Bug 1:「7岁生日」被写死在句子里,换成春节也照样显示。Bug 2:格式不对时它照单全收,存进去一个无效日期,显示出 undefined 和负两万天。刷新后它确实记得新目标——这一项是好的。

03 · Round 1第一次报 bug

我们的 bug 描述(可复制,套用这个格式)
我在浏览器里测试了,发现两个问题:
1. 输入「2027-01-01 春节」后,页面显示「距离春节 7岁生日还有 74 天」。新目标不是生日,应该显示「距离春节还有 N 天」,不要带「7岁生日」。
2. 输入一个格式不对的内容,比如「明年元旦」,页面显示「距离undefined 7岁生日还有 -20745 天」。格式不对时应该提示「日期格式不对,请按 2027-01-01 春节 这样输入」,并且不保存。
只修这两个问题,其余保持不变,输出修改后的完整代码,不要解释。

按「输入了什么 → 看到什么 → 应该是什么」写清楚了。测试第三版:

Bug 1 · 部分修好显示「距离春节 74 天」:去掉了「7岁生日」,但「还有」也一起被删了。
Bug 2 · 没修好输入「明年元旦」依然显示「距离undefined -20745 天」,没有弹出提示。

看代码能找到原因:它加了一段 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最终版

最终版输入春节
正常输入:「距离春节还有 74 天」
乱输入时弹出「日期格式不对,请按 2027-01-01 春节 这样输入」,页面保持原样,没有存入无效日期。(弹框是浏览器原生对话框,截图里看不到,这里写出自动测试记下的弹框文字。)
最终版完整代码(可复制)
<!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 的格式

报 bug 模板
我在【浏览器 / 手机】上测试,发现【N】个问题:
1. 我【做了什么 / 输入了什么】,页面显示【实际看到的】,应该是【期望的】。
2. ……
只修这些问题,其余保持不变,输出修改后的完整代码。
(修了一次还不对:把出问题的那一行代码贴出来,直接说改成什么。)

07 · Limits真实边界

· 第二次能修好,很大程度上是因为我们自己看懂了原因、直接给出了改法。不懂代码的读者可以把「实际看到 / 期望」写清楚,再要求它「先解释为什么会这样,再修」;这个做法本文没有实测。

· 最终版仍有上一篇提到的时区问题,也没有「恢复默认」按钮;只在 Chrome 里测试过。

08 · Next下一步

会做小东西了,下一站换个方向:让 AI 帮你读材料、查资料,以及怎么识破它编出来的东西。

这是「03 做第一个小作品」的第 2/2 篇。实测原始记录随站点源码保存(src/runs.json)。