JavaScript 如何看报错

大家平时用JavaScript写代码时，有没有过这种经历：运行代码后，页面要么白屏，要么功能完全没反应，却找不到问题在哪？其实这些“不对劲”的背后，大多藏着JavaScript的“报错信息”——就像医生给的诊断书，能直接告诉我们哪里出了问题。今天就用生活化的例子，聊聊怎么看懂这些报错信息。

先找最显眼的“报错来源”

很多人看到满屏的英文报错就慌了，其实不用怕，先看报错开头的“来源标识”。比如你用浏览器写代码，打开开发者工具的“Console（控制台）”面板，最前面会有“VMxxx:1”这样的标识，这里的“VM”指的是浏览器临时运行代码的环境，“1”代表报错的代码在第几行。

举个例子：你写了一句 let userName = "小明"，后面不小心多打了一个分号，写成 let userName = "小明";;，浏览器运行时会直接在控制台标红，开头的“2”就是出错的行数。这一步就像快递员送错了地址，先告诉你“哪条路的几号门出了问题”，不用急着看后面的文字，先定位位置就成功了一半。

拆解报错的“核心问题”

定位完行数，接下来看报错的核心内容，这才是“诊断书”的关键。常见的报错类型其实很有规律，用生活场景对应一下就懂：

• 第一种是“缺东西”的报错，比如你想打印 userAge，但之前没定义过这个变量，控制台会显示 Uncaught ReferenceError: userAge is not defined。这就像你去超市买东西，报了一个不存在的商品名，收银员根本找不到对应的货。
• 第二种是“用错东西”的报错，比如你想把数字和文字拼在一起，不小心写成 let result = 12 + "岁";（其实这是对的，换个错的：你想让别人点按钮弹出提示，却写成 document.getElementById("btn").onclick = 弹提示;，这里的“弹提示”是你自己写的函数名，没加引号，浏览器会显示 Uncaught ReferenceError: 弹提示 is not defined——这就像你点外卖备注“多放辣”，却把备注写成了一个不存在的名字，商家根本看不懂。
• 第三种是“搞错用法”的报错，比如你想调用 toUpperCase() 把小写字母转大写，却把变量写成数字 let str = 123; str.toUpperCase();，控制台会显示 Uncaught TypeError: str.toUpperCase is not a function。这就像你把手机当锤子用，手机根本没有敲钉子的功能，自然会报错。

学会“顺着报错改代码”

看懂了报错，改起来就简单多了。还是刚才的例子：如果报错是“变量未定义”，就检查一下是不是漏写了 let 或 const 声明；如果是“类型错误”，就看看是不是把数字当成了字符串用；如果是行数不对，就翻到对应代码行，看看是不是少了符号、打错了单词。

很多新手会犯一个错：看到报错就直接删代码，其实不如把报错信息复制到搜索引擎里，很多人已经踩过同样的坑，网上会有现成的解决方法。比如搜索“Uncaught ReferenceError is not defined”，会发现大多是变量没定义、函数名打错的问题，对照着改就行。

其实JavaScript的报错一点都不可怕，它就像代码的“纠错老师”，把模糊的问题拆成具体的位置和原因，只要跟着提示一步步找，就能快速解决问题。下次再遇到页面出错，先打开控制台看看，你会发现很多问题其实比想象中简单。