JavaScript 错误

Posted on by

在 Javascript 中管理错误和调试代码是我们确保代码正常工作的方法之一。在本文中，我们将介绍在代码中调试和管理错误的常用方法。

控制台#

控制台日志是我们检查代码中发生的事情的最佳方式。可以在大多数浏览器中通过右键单击网页上的任意位置并选择“检查元素”来查看控制台日志。在控制台选项卡中，我们可以看到来自 Javascript 代码的任何控制台日志。

要将控制台日志添加到代码中，最简单的方法是执行以下操作：

console.log("Hello!");

如果此代码从我们的 Javascript 运行，那么我们将在代码中看到“Hello”。这是记录错误或消息的最基本方法，但还有其他方法。

其他有用的控制台#

我们可以使用控制台日志来管理错误和消息在我们的代码中的出现方式。让我们看看它是如何工作的。

控制台错误

错误通常在控制台中以不同的方式显示，并表明某些重要的东西已经损坏。通常这些都是红色的。这不会停止执行其余代码。我们可以使用以下方式显示错误消息console.error：

console.error("ERROR!");

控制台警告

与错误类似，但通常以黄色警告用户预期行为可能已更改。同样，这些不会停止执行，并且可以按如下方式运行：

console.warning("warning!");

使用控制台计时#

在高度优化的系统中，弄清楚一个操作需要多长时间是很重要的。为此，我们可以使用许多控制台操作：

console.time("my timer");
console.timeLog("my timer");
console.timeEnd("my timer");

在上面，我们有一个计时器，我们开始称为“我的计时器”。然后我们可以根据“我的计时器”记录时间，或者完全结束它。更详细地说，它们执行以下操作：

  • console.time – 这将启动一个计时器，该计时器将在后台运行，称为“我的计时器”。您最多可以有 10,000 个计时器。
  • console.timeLog – 这将记录自计时器启动以来代码中特定点的“我的计时器”的时间。
  • console.timeEnd – 这将完全结束“我的计时器”，因此我们将无法针对它记录时间。它还将记录时间。

Javascript 中的错误#

Javascript 可以给我们许多不同的错误，这些错误会告诉我们一些我们做错了什么：

  • ReferenceError – 我们试图引用一个不存在的变量。
  • EvalError – 我们尝试运行时发生了一个问题eval()。
  • TypeError – 由于与类型相关的问题而发生了问题 – 即函数期望一种类型，并得到另一种类型。
  • RangeError – 当我们尝试调用超出预期范围的内容时发生问题，即我们调用了一个不存在的数组元素。
  • AggregateError – 包含许多错误的错误。
  • URIError – 我们有一个无效的 URI 字符串或错误地使用了 URI 函数。

避免重大错误#

这些错误都告诉我们为什么我们的代码无效。我们可以通过编写高质量的代码来避免错误，并使用条件语句来确保变量有效。例如，我们可以typeof在使用之前检查 a 变量是否已定义：

let i = 1;
if(typeof i !== "undefined") {
    i += 20;
}

检查变量是否存在是避免错误的常用方法——尤其是当我们知道变量可能不存在时，即如果它来自 API 或外部源。

Try … Catch

另一种避免错误的方法是使用try ... catch语句。我们在“Javascript 中的错误”部分提到的错误都是代码破坏code breaking– 这意味着如果抛出它们，代码将停止工作。使用try ... catch语句，我们可以尝试一些代码，如果失败，我们就会捕获错误。如果错误是代码破坏，它将不再破坏代码，我们只会在控制台日志中得到一条信息消息。

这样的声明可能如下所示：

try {
    // This throws an error since i is not defined.
    i += 20;
} catch(error) {
    // We can catch the error so the code will not break, and console log it.
    console.log(error);
}

try ... catch当我们尝试构建 Node.JS 服务器时，语句变得非常重要。如果抛出代码破坏错误，它可能会使整个服务器崩溃 – 因此我们需要适当地捕获和处理我们的错误，以免破坏每个人的体验。

使用 Try … Catch 处理特定错误#

如果我们想处理一个特定的错误，我们可以捕获它并使用instanceof属性检查它。看起来像这样：

try {
    // This throws an error since i is not defined.
    i += 20;
} catch(error) {
    // We can catch the error so the code will not break, and console log it.
    if(error instanceof ReferenceError) {
        console.log("This is a reference error");
    } else if(error instanceof EvalError) {
        console.log("This was an error with the eval() function");
    }
}

这使我们可以针对特定错误采取特定操作，从而为用户提供更好的体验。

产生我们自己的错误#

想象一下我们需要一个变量存在的一些代码，否则其余代码将中断。我们可能想要生成我们自己的错误，以阻止代码执行。我们可以使用throw关键字来做到这一点，其中 throw 之后的文本是我们希望用户获得的消息。例如：

if(typeof i == "undefined") {
    throw "Could not find variable i";
}

此错误将抛出如下消息：

Uncaught Could not find variable i

我们甚至可以使用数字、对象或布尔值作为我们的错误信息。使用这种技术，我们还可以创建一个带有特定消息的新错误对象：

throw new Error("You made an error");

这会给我们一条看起来像这样的消息：

Uncaught Error: You made an error at anonymous:1:7

结论#

感谢您阅读本 Javascript 错误指南。正确的错误消息在任何语言中都非常重要，Javscript 也不例外（双关语）。在本指南中，我们介绍了：

  • Javascript 中不同类型的控制台日志，包括警告和错误。
  • 如何使用控制台对操作进行计时，以潜在地优化您的代码。
  • 如何捕获错误，以免它们破坏您的整个应用程序。
  • instanceof如何使用命令根据错误类型给出特定消息。

推荐阅读：