在 ES10 中掌握打印出栈信息的技巧-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，我们的代码越来越复杂，难免会出现一些异常情况和 bug，这时候就需要打印出栈信息来查找问题。在 ES10 中，我们可以用一些简单的技巧来掌握打印出栈信息的能力，本文将为大家详细介绍。

console.trace()

console.trace() 是一种非常简单的方法，可以帮助我们打印出栈信息。只需要在出现问题的代码处调用该方法，就可以把调用栈信息全部打印出来。例如：

// javascriptcn.com code example
function funcA() {
  console.trace();
}

function funcB() {
  funcA();
}

function funcC() {
  funcB();
}

funcC();

该代码段会在控制台中打印出如下信息：

Trace
    at funcA (<anonymous>:2:9)
    at funcB (<anonymous>:6:3)
    at funcC (<anonymous>:10:3)
    at <anonymous>:14:1

这里的 Trace 表示是 console.trace() 打印出的信息，后面的信息则是调用栈的具体内容，可以帮助我们快速定位问题所在。

我们也可以利用 Error 对象来获取到调用栈信息，只需要在 catch 语句中打印出 Error 对象即可。例如：

try {
  // some code here
} catch (err) {
  console.log(err.stack);
}

这里的 err.stack 就是调用栈信息，包含了其他的信息如错误类型、详细描述、文件路径等。虽然相比 console.trace() 更加麻烦，但他提供了更多的信息，可以帮助我们更快地解决问题。

当我们在开发时使用了压缩后的代码，通过 console.trace() 或 Error 对象获取到的信息也会变得十分难以读懂，这时候可以开启 source map 功能。source map 是一种映射文件，可以帮助我们将压缩后的代码映射回原来的代码，从而更容易地定位问题所在。

在 webpack 中开启 source map 的方式是：

module.exports = {
  // ...
  devtool: "source-map",
};

还可以使用 cheap、inline、eval 等不同的选项来进行性能优化。

打印出调用栈信息在开发过程中十分重要，可以帮助我们更快速地解决问题。在 ES10 中，我们可以使用 console.trace() 或 Error 对象来获取到调用栈信息，还可以开启 source map 功能使信息更容易读懂。希望本文能够帮助大家更好地掌握这些技巧。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67314e36eedcc8a97c9448b7