错误处理与调试

这一课你将能做到

1. 读懂控制台报错的「哪一文件、哪一行」，并据此定位问题
2. 用 try/catch 接住可能失败的代码并给用户提示
3. 用断点或 console.log 做一次最小排查，形成固定套路

为什么要学

写 JS 一定会报错。
差别在于：有人看红字 10 秒定位；有人盲目改三小时。
调试是技能，不是丢脸。

真实项目里，网络失败、空数据、选择器写错每天都在发生。
会处理错误，你的小工具才配叫「能给别人用」。

先建立图像

出错 → 控制台红色堆栈（stack）
第一行通常最重要：错误类型 + 消息 + 位置
往下看：调用链（谁调用了谁）

常见类型：

名字	人话例子
SyntaxError	语法写破（缺括号、缺引号）——往往文件直接无法运行
TypeError	对 null/undefined 取属性；不是函数却当函数调用
ReferenceError	变量未定义就用
RangeError	如错误的数组长度等少见场景

排查套路：
  1) 读红字第一行
  2) 用 log/断点验证「你以为的值」
  3) 一次只改一处
  4) 需要给用户退路时再包 try/catch

跟着做

步骤 1：故意报错并阅读堆栈

控制台：

const user = null;
user.name; // TypeError: Cannot read properties of null

应看到 TypeError，并指出行号。点开位置，确认「就是这一行」。
再试：

notDefinedNow; // ReferenceError

分清：没声明的名字 vs 有名字但是 null。

步骤 2：try/catch 给退路

function safeName(user) {
  try {
    return user.name.toUpperCase();
  } catch (err) {
    // 不要空 catch：至少留下日志
    console.error("safeName 失败", err);
    return "未知用户";
  }
}
console.log(safeName(null)); // 未知用户
console.log(safeName({ name: "ada" })); // ADA

人话：可能炸的地方包起来；失败时给退路，并留下日志。
但不要用 try/catch 掩盖「本该先校验」的逻辑——能提前 if (!user) 更清晰。

步骤 3：页面里的排查套路

保存为 js-errors.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>调试</title>
</head>
<body>
  <button type="button" id="btn">跑一下</button>
  <p id="out">等待操作</p>
  <script>
    document.getElementById("btn").addEventListener("click", function () {
      const el = document.getElementById("not-exist");
      console.log("el 是", el); // 先验证假设：这里多半是 null
      const out = document.getElementById("out");
      try {
        el.textContent = "hi"; // el 为 null 时会 TypeError
      } catch (err) {
        console.error(err);
        out.textContent = "找不到目标元素，请检查 id";
      }
    });
  </script>
</body>
</html>