检查 AI 写出的代码

核心方法

AI 生成的代码可以读起来很合理，同时遗漏真实用户会遇到的情况。本课根据第一课的需求执行测试，检查正常流程、边界输入、保存失败和展示安全。测试报告只记录你实际执行过的操作；没有运行的项目标为“待测”。

本课的成果

一份含预期、实际结果与证据的测试记录，至少一条具体修正，以及修正后的复测结果。不要把“控制台没有红字”当作全部验证，也不要只用模型阅读代码代替浏览器运行。

案例拆解

第一步：先验证核心流程

T01 新增一本书 → 列表出现同名记录 → 刷新 → 仍然存在
T02 勾选已读 → 已读计数加一 → 刷新 → 勾选状态保持
T03 新增同名书两次 → 删除其中一本 → 另一条仍然存在
T04 删除记录 → 刷新 → 不会重新出现

每次测试记录浏览器、访问地址与代码版本。localStorage 按来源保存，端口改变会影响测试数据所在位置。测试清空会删除这个示例的本机记录，先确保没有需要保留的书单。

第二步：测试输入边界

T05 空字符串或仅空格 → 提示输入错误，列表不变
T06 80 个普通汉字 → 可以添加；81 个 → 被拒绝
T07 100 条有效记录 → 第 101 条被拒绝
T08 <img src=x onerror=alert(1)> → 仅作为文字显示

长度采用 Unicode 码点口径，因此 JavaScript 的 string.length 不一定与规则相同。示例使用 Array.from(title).length。如果改成面向用户的可见字符限制，应同时修改校验、文案和测试，而不是只改提示文字。

T08 的目的不是教你攻击别人的网站，而是在自己控制的原型中确认输入被当作文本。正确结果是出现原样书名、没有新增图片元素，也没有触发弹窗。

第三步：验证损坏数据不会被悄悄覆盖

在自己这个示例的开发者工具 Console 中，可以先保存测试前数据，再写入故意损坏的字符串并刷新：

// 仅在你自己的示例中使用；先保留需要的数据。
localStorage.setItem('nextory-reading-list-v1', '{broken');
location.reload();

预期是显示无法读取、暂停新增，存储中的原字符串仍然存在。记录结果后，可以使用页面“清空本机记录”并确认，恢复空列表。不要把这个测试写入真实用户正在使用的数据空间。

第四步：验证保存失败的反馈

在测试页面中临时替换存储方法，模拟浏览器拒绝写入。刷新页面会恢复原方法；不要把下面代码加入发布文件。

Storage.prototype.setItem = function () {
  throw new DOMException('Test only', 'QuotaExceededError');
};

新增或勾选后应提示保存失败，旧列表与状态不变。这个模拟验证错误处理，不代表你的设备真的空间不足。报告中写清“模拟写入异常”，不能把它记录成真实线上故障。

第五步：检查操作与展示

将视口设为 360 像素宽，加入很长的书名，检查页面是否横向溢出。只用 Tab、Enter 和空格完成新增、勾选、删除；检查焦点是否可见。打开 Network 确认没有无关外部请求，Console 没有未处理错误。必要时让一位未看过代码的人按说明运行，观察说明是否遗漏。

第六步：进行有重点的代码审查

先问四个问题：用户输入在哪里进入 DOM；秘密是否写在前端；失败是否仍提示成功；数据边界是否与需求一致。如果后续接入 PHP/MySQL，共享数据应通过服务器接口处理，服务器仍需校验输入、检查访问权限并使用参数化查询，不能信任前端验证。PDO 预处理语句用于把参数值与 SQL 语句结构分开；表名、列名等结构仍需由代码限定。PHP：PDO 预处理语句 ↗

提示词与使用说明

请审查这个原生 JS 阅读清单，按影响排序列出具体问题。
每个问题包含代码位置、触发输入、实际后果、最小修复和验证步骤。
重点：DOM 中的用户输入、保存失败、损坏数据、重复 ID、键盘操作。
不要把未经执行的测试写成已通过，不要求更换框架。

需求：[粘贴]
完整源码：[粘贴，去除任何真实秘密]
我已经执行的测试：[填写实际结果]

独立练习

先把答案写进本课笔记，再展开解析。以下人物、活动和数据均为教学用的虚构材料；练习记录请填写你实际完成的过程。

给定材料

测试清单：正常书名、纯空格、超长标题、特殊字符、标记已读后刷新、删除后刷新。
同事报告“都没问题”，没有输入或截图。

你的任务

选三项真正执行，填写输入、步骤、预期、实际、结论。发现失败先保留证据，再请 AI 解释可能原因。

完成后，对照参考解析

“特殊字符”要写具体输入；“刷新”要说明在哪个来源地址、是否同一浏览器。示例记录：输入纯空格，预期不新增；实际多出空白行；失败，需在入库前 trim 后检查。该例只是格式示范，不是你的测试结果。修复后既重测失败项，也检查原来正常的新增，避免修一处破坏另一处。

验收与迁移

对照自己的成果逐项检查。未达到的项目，写明缺什么、怎样补；这些标准用于自查，不会自动标记课时完成。

至少三项有真实操作与实际结果
失败和未测没有被写成通过
修复后检查相关正常流程

带回自己的场景

把这张测试表随项目交付；运行截图只能证明某一刻的界面，不能替代边界测试。

延伸资料

浏览器存储的使用与限制 ↗。资料用于核对方法和技术边界，案例与练习由 Nextory 编写。