不要害怕JavaScript堆栈跟踪

读完这篇文章后，你就开始着手一个新项目。这并不奇怪 - 与您之前完成的项目相距不远。

在准备好项目基础 20 分钟后（以便您可以开始真正的项目），您会遇到错误。它看起来并不算太糟糕，但是在 Google 上搜索了一个小时并进行了 10 次更改以尝试解决问题后，你很快就回到了现实。您只是在不会影响您的底线的代码上花费了大量时间。即使您没有为该项目获得报酬，您也会感到失败。

在深入研究解决问题的其他途径之前，请退后一步，理清思路，喝杯水，然后考虑以下几点：

学习不是浪费时间——盲目地攻击问题是浪费。
值得重新开始吗？
也许您可以尝试不同的设置，例如框架，以减少设置错误的可能性（因为这是出现虚假现实问题的地方）。这也可能使您的问题更有可能在框架的其他用户中很常见。
询问他人的见解。一个诚实的问题并不是软弱的表现——事实上，它可以增加团队的和谐。

现在让我们假设您已经完成了上述选项。你觉得最好继续前进并解决这个问题——你可以采取什么策略？我们将专注于一种特定的策略——查看堆栈跟踪以确定原因。寻找根本原因是大部分的战斗。 [请记住，这份简短的清单是基于我自己的经验，并不全面。话虽如此，请尝试以开放的心态尝试新策略。 😄]

当你遇到问题时，提交你的代码（至少到你本地的 git 中）。即使此代码可能未处于完全正常运行的状态，它也比您最终可能遇到的混乱要好。在此过程中进行少量提交将帮助您跟踪您尝试过的内容。
设置一个计时器（番茄式或只是一个常规计时器）。我建议不要超过30分钟。这并不意味着您需要在那个时间范围内找到解决方案，但您可以使用一个小的休息时间来重新评估。
很好地了解在哪里查看（取决于您的平台）。
知道如何挑选关键词和细节。
了解如何查找。

我们将更详细地介绍上面的最后三点。

在哪里看

以下是几种不同的情况以及堆栈跟踪可以显示的位置。

节点（后端）--> 终端控制台
React / Vue / vanilla JS（前端）--> 浏览器控制台

没有堆栈跟踪。我该怎么办？

在某些情况下，没有任何痕迹显示。这是为什么？这通常是因为存在逻辑错误（它没有按照您想象的方式工作）并且代码本身是正确的。要尝试找到问题的根源，您可以在您认为问题出现之前和之后将信息记录到控制台。

要找什么

将堆栈跟踪想象成一堆盘子。当它们堆积起来并开始倒下时，你知道最后几个盘子是罪魁祸首。同样，最近的操作（可能是问题所在）位于堆栈跟踪的顶部。

同样重要的是要注意，您在此跟踪中看到的行并非全部由错误组成。这是程序/脚本在此之前的发展历史，使其成为查明真正问题的绝佳工具。

错误/异常消息

如果问题涉及到一个包，作者可能已经提供了一个很好的信息或提示来提供帮助。即使是语言级别的异常通常也有提示。这将是一个完美的起点。

文件名

通常问题在于您自己的源代码而不是其他包（至少这是一般规则），因此请查找具有您的基本目录的文件。如果某个文件是您最近更改过的文件，那么这是检查那里的一个很好的指示。

行号

你很幸运。您不仅可以看到文件名，而且跟踪包括行号，有时还包括列号。该列往往没有那么有用，但是，嘿-感谢决定将它们放在那里的人！

异常类型

有时抛出异常的名称可以为您提供可靠的线索。不过，您可能不会确切知道它的含义。使用从下一节中收集到的一些见解基于这些进行搜索。

如果您经常遇到此问题，请考虑记住您的语言或框架的一些更常见的例外情况。

我要走多深？

一些痕迹是非常长。如果您必须像阅读小说一样阅读整本书，您可能会感到眼皮沉重。那么它在哪里从有用转变为浪费时间呢？

我的经验是，你可以在 trace 的前 5 项中找到你需要的线索。如果你仔细梳理了一遍，仍然没有发现任何东西，那么，无论如何，继续。

让我们创建一个假错误以查看其中一些线索是否有效。您可以运行此客户端或服务器端：

演示.js

firstFunction = () => {
  secondFunction();
}

secondFunction = () => {
  thirdFunction();
}
thirdFunction = () => {
  notDefined();
}

这会产生：

查找什么

如果错误中提供了一条消息，这可能是最好的搜索内容。

谷歌搜索提示

使用引号搜索确切的短语。
在这些引号内放置一个星号以指定一个未知的单词或短语。
使用减号表示您要消除包含单词的结果。
如果您正在寻找教程，请在开头说明“如何”一词（Google 可以很聪明）。

Stack Overflow 搜索提示

通过用方括号括起来为您的查询添加标签：[vue] trigger an event。
通常，您要查找具有纯绿色“答案”框的结果。这意味着一个已被接受为正确答案。
看看除了标记为正确的答案之外的其他答案。它们可能更现代或更干净，或者只是您的风格。

右键单击所有看起来很有希望在新选项卡中打开它们的搜索结果。要加快流程，请在单击链接时使用平台的快捷键（Windows 上的 Ctrl，Mac 上的 Cmd）。

在您将代码接受到最终产品中之前，请务必了解代码实际在做什么。

问题解决了——或者是吗？

我们遇到了多少次问题，进行搜索，找到带有答案的 Stack Overflow 帖子，然后看到我们已经对其进行了投票？ 😆 为避免这种情况，我们应该用解决方案记录问题，更重要的是至少做以下两件事之一：

创建一个新的测试。
写一些错误处理。您甚至可以捕获错误并使用自定义消息吐出您自己的错误。

if (valueIsNotCorrect) throw new Error(`D'oh, you did it again! Fix me by ...`);

这些本质上都是文档，所以双赢！

最后，这是来自 Twitter 上的 Jordan Hall 的笑声：

window.onerror = error => {
  // redirect to SO with error as query
  window.location.href = `https://stackoverflow.com/search?q=[js]${error.message}`;
}