初学者使用 JavaScript 进行调试：我的处理方式。

📝 注意：使用 Chrome，尽管大多数浏览器都非常相似，所以您可以使用本文并根据您喜欢的浏览器进行稍微调整。

🤓 网上有很多关于如何使用 Chrome 调试 JavaScript 的深入文章，也有很多主观性很强的文章告诉你调试时不该做什么。这篇文章不是那样的。相反，它只是我研究问题时的一些早期步骤的快速概述。

我希望它能成为更深入的文章的一个很好的辅助，让你更好地感受 JS 调试的“流程”，就像一个普通人试图弄清楚到底发生了什么事情一样 🙂

场景：点击按钮没有得到预期结果

我期望点击页面上的按钮时会收到 JavaScript 警告。但是点击按钮后什么也没发生 🙁 我该先尝试什么？

首先要做的简单事情：检查控制台中的错误

有时候，只需这样就够了。我打开开发者控制台（在 Mac 上，Chrome 浏览器：cmd-option-j。Safari 浏览器：cmd-option-c。Firefox 浏览器：cmd-option-k。有人漏掉了关于保持快捷键一致性的备忘录🤪。）

我查看单击按钮时是否会弹出任何 JS 错误。

嗯，aler is not defined呃？哎呀！我好像拼错alert了。很容易改正！

尝试打开“捕获异常时暂停”

如果发生错误但控制台中未显示，可能是因为错误发生在 try-catch 块中（或带有catch未正确处理异常的 Promise 中）。建议您前往sources“发生异常时暂停”选项卡，并勾选“捕获到异常时暂停”复选框。然后尝试再次点击按钮。

因此，在这种情况下，承诺被拒绝，但警报仅在承诺解决后才会发生（promise.then下面几行）

不幸的是，这个承诺被一个非常现实的 😳 拒绝了reject(‘foo’)，所以警报永远不会发生。好的，我可以解决这个问题！把它变成reject，resolve我们就没问题了（注意：现实生活中可能没那么简单 😛）

此源选项卡还有另一个用途：有时控制台中的错误即使显示出来也可能无法提供足够的信息。

也许错误表明变量未定义，但您无法弄清楚为什么。

在这种情况下，您可以打开“发生异常时暂停”，但无需打开“捕获异常时暂停”选项，因为您能看到错误，只是还不能完全理解错误。

哎呀，看来我不小心methodToUse在事件监听器的作用域内覆盖了全局变量，所以它在这里没有定义。我可以通过查看右侧的“作用域”部分来发现这个问题，该部分显示了该方法作用域内所有可用的变量及其含义。在左侧，我可以看到实际的代码，幸运的是，将变量设置为 undefined 的那一行代码非常醒目，所以很容易找到并修复。