哎呀，我又犯了错误：常见 JavaScript 错误调试指南

编写 JavaScript 代码有时会让我们感到想逃跑、想躲藏，甚至感到害怕。但是，掌握一些调试技巧，我们就能进入状态，尽情跳舞，直到世界末日！

类型错误：无法读取未定义的属性“lucky”

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}

console.log(girl.named.lucky)

这段代码抛出了错误“Uncaught TypeError: Cannot read property 'lucky' of undefined”。在我们的对象中，虽然有 namegirl属性，但没有。由于是未定义的，我们无法访问不存在的对象的属性。所以，就像那个名叫 Lucky 的女孩一样，我们的生活（或对象）中缺少了一些东西。我们想要将其更改为，这样我们就能得到“Lucky”了！namedgirl.namedgirl.named.luckygirl.name

属性是 JavaScript 对象中的值。您可以点击此处了解更多关于对象的信息。

调试 TypeError 的步骤

类型错误是由于尝试对不具有与该操作匹配的数据类型的对象执行操作而导致的。例如，尝试.bold()对数字运行、检索 的属性undefined，或者尝试运行并非函数的函数（例如，girl()会抛出错误——girl 是一个对象，而不是一个函数）。对于后两者，我们会得到“Uncaught TypeError: yourVariable.bold is not a function”和“girl is not a function”。

为了调试这些错误，你需要检查你的变量——它们是什么？是什么girl？它是什么girl.named？它应该是什么样的？你可以通过查看代码、console.log添加 - 变量、使用debugger语句，或者直接在控制台中输入变量来检查它是什么！确保你能对变量的数据类型执行操作。如果不行，请强制转换变量的数据类型，添加条件语句或 try/catch 语句以使其仅在特定情况下运行该操作，或者对其他变量执行该操作！

堆栈溢出

根据《Baby One More Time》的词曲作者的说法，“Hit me baby, one more time”中的“hit”指的是打电话，所以布兰妮希望她的前任再给她打一次电话。这很可能会导致她将来打更多电话。这反映了递归——如果调用堆栈溢出，就会导致错误。

这些会随着浏览器而变化，但看起来像：

Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)

这可能是由于没有递归基本情况或基本情况从未触发而导致的。

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

在上面的函数中，stillBelievenever 变为false并且孤独感不断增加，所以我们不断递归调用oneMoreTime而不退出该函数。

如果我们让布兰妮依赖她的朋友，而不是减少她的孤独感，并且她不再相信这段关系，她就不会再希望她的前任打电话了。

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

无限循环也存在类似的问题，不过我们的页面通常不会收到错误消息，而是直接卡死。这种情况发生在while循环未终止的时候。

let worldEnded = false

while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

我们可以用类似的方法解决这个问题！

let worldEnded = false

while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

调试无限循环和未终止的递归

首先，如果您陷入了无限循环，如果您使用的是 Chrome 或 Edge，请退出该标签页；如果您使用的是 FireFox，请退出浏览器窗口。然后，检查您的代码：是否有什么东西明显地造成了无限循环/递归？如果没有，我会debugger在循环或函数中添加一个语句，并确保变量在前几次迭代中保持应有的状态——您可能会注意到某些地方出现了异常。在上面的例子中，我会debugger在函数或循环的第一行添加一个。然后，我会转到 Chrome 中的“调试”标签页，查看变量Scope。然后，我会点击“下一步”按钮，看看在一两次迭代之后它们是什么。通常这样就能找到解决方案了！

这是使用 Chrome 的 DevTools 进行调试的出色指南，这里还有一份适用于 FireFox 的指南。

未捕获的语法错误：意外的标识符

JavaScript 中最常见的错误可能是SyntaxError's —— 这意味着我们没有遵循 JavaScript 的语法规则。用布兰妮在《Everytime》这首歌里的歌词来表达，JavaScript 对我们缺失的括号、方括号和引号说的是“我想我需要你宝贝”。

如果您遇到这些类型的错误，我建议您安装一个好的文本编辑器主题或扩展程序——Bracket Pair Colorizer 可以帮助对括号和方括号进行颜色编码，而 Prettier 或其他 linter 工具可以帮助快速捕获这些错误。此外，请确保正确缩进代码，并尽可能保持代码块简短且不嵌套。这将使调试任何问题变得更容易！

现在，有了新的调试技能，你会感觉 JavaScript 比昨天更熟练了。如果你想要更多流行文化代码参考，接下来是感谢你：链表简介。