TypeError: Cannot read properties of undefined (reading 'trim') MessageForm.tsx:24
练习：先判断哪一层，再决定改哪里
下面五个案例都来自同一个 AI 留言板。不要先看答案，也不要凭“感觉像数据库”选择。逐个阅读四处证据。
INTERACTIVE DEBUG LAB不要猜，先看四处证据
用户看到的现象
点击“保存留言”以后完全没反应
按钮能看到，也能点击，但页面不变化。
没有出现 POST /api/messages
点击按钮时没有新增日志
messages 表没有新增记录
根据证据，第一处应该查哪一层？
做完以后，再完成一次真实项目练习
打开你正在开发的网站，选择一个需要点击按钮的功能，例如登录、保存、生成或删除。
第一步：写下复现路线
text
打开哪个页面：
输入什么：
点击哪个按钮：
实际看到什么：第二步：打开四个证据窗口
- 浏览器 Console。
- 浏览器 Network。
- 运行前端或后端的终端。
- 数据库控制台或部署日志，仅在请求已经到达对应层时查看。
第三步：只记录事实
text
Console：有没有错误，第一条是什么
Network：有没有请求，状态码和 Response 是什么
后端日志：点击后有没有新记录
数据库：是否真的新增、更新或删除不要先写“我觉得后端坏了”。先写“Network 返回 500，后端日志显示 DATABASE_URL 未定义”。
第四步：让 AI 解释证据
把排错 Prompt 模板填完整，让 AI 先判断层级和检查文件，再允许它修改。
第五步：重复原操作验收
修改后按相同步骤再走一遍。原始错误消失、预期请求出现、后端和数据结果一致，才算完成。
五个实验案例中，为什么不能只看页面提示判断原因？
答案：页面提示往往把不同失败都显示成同一句话。Console、Network、后端日志和数据库结果才分别说明请求在哪一站停下。