看到浏览器控制台里那串红色报错文字时，别对着“Uncaught TypeError”一头雾水。第一步非常关键：先准确定位报错所在的文件和行号。点击报错信息末尾的“script.js:42”，浏览器会自动跳转到Sources标签页，并高亮显示第42行代码。这一步绝不能跳过，否则就像听人说“厨房炸了”却不看灶台，永远找不到漏气的煤气罐。

先定位报错文件和行号，快速锁定问题源头

打开浏览器开发者工具（按F12或右键→检查），切换到Console标签页，找到最顶部那条红色报错信息，点击末尾的文件名和行号，例如“script.js:42”，浏览器会自动跳转到Sources标签页并高亮那一行，方便你直接查看出错的代码上下文。

读懂错误类型关键词，快速判断错误性质

首先，抓住主干词进行快速判断。Uncaught表示这个错误没有被try-catch捕获，程序直接中断；TypeError说明类型使用有误，比如把字符串当函数调用；ReferenceError代表变量根本没有声明过；SyntaxError是代码语法错误，比如少了一个右括号或引号没有闭合。

其次，用生活化的比喻来帮助理解。undefined可以想象成“空快递盒”——你写了user.name，但user这个盒子根本没拆开过（值是undefined），就去翻里面叫name的小纸条，当然翻不到。null可以想象成“贴了‘此盒已清空’标签的快递盒”，它明确告诉你里面什么都没有，但盒子本身存在。

顺藤摸瓜查源头，一步步排查错误原因

第一步，检查报错行本身有没有明显硬伤。看看这一行有没有拼错变量名、多打或少打点号（.）、括号是否成对、引号是否闭合。常见陷阱：=赋值误写成==或===判断，导致整行逻辑崩溃。

第二步，往上数3～5行，找到这个变量第一次出现的位置。比如报错在第42行的data.items[0].title，就回到第38行看data是怎么来的——是fetch()请求返回的？还是手动写的对象？如果是异步请求，很可能第42行执行时data还没有拿到，仍然是初始值undefined。

第三步，加一句console.log(变量名)验证实际值。在报错行正上方插入console.log('data:', data)；刷新页面看控制台输出。如果打印出来是data: undefined，问题就锁定在数据来源环节，不用再往下研究title层级。