在前端开发中，我们常常会遇到JavaScript错误。然而，当这些错误涉及到多个模块和文件时，追踪问题变得非常困难。幸运的是，有一个npm包叫做sourcemapped-stacktrace可以帮助我们轻松地解决这个问题。
什么是sourcemapped-stacktrace
sourcemapped-stacktrace是一个可以将压缩后的JavaScript堆栈跟踪映射回原始源代码的工具。它支持各种浏览器，包括Chrome、Firefox、Safari和IE。
安装和使用
要使用sourcemapped-stacktrace，我们需要先安装它：
npm install sourcemapped-stacktrace
接下来，让我们看一下如何在代码中使用它：
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
--- -
-- ----------------
- ----- ------- -
-- ---------------
-------------------------- ------------- -- -
-------------------------
---
-在上面的示例中，我们首先导入了sourcemapped-stacktrace，然后在try...catch语句块中捕获了一个异常。接下来，我们调用了mapStackTrace函数，并将异常堆栈跟踪和回调函数传递给它。回调函数将被调用，并传递一个已映射的堆栈跟踪字符串。
示例
以下是一个更完整的示例，其中我们将在浏览器控制台中打印已映射的堆栈跟踪：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------------------------
------- ---------------------------------------------------------------------------------------------
--------
-------- ------------ -
-- ----------------
--------------------
-
-------------- - ----------------- ------- ------- ------ ------ -
-------------------------- ------------- -- -
-------------------------
---
--
---------
-------
------
------- ----------------------------------------
-------
-------在上面的示例中，我们定义了一个throwError函数，该函数在被调用时将抛出一个异常。然后，我们注册了一个window.onerror事件处理程序，该处理程序将在全局JavaScript错误发生时被调用。在此处理程序中，我们将异常堆栈跟踪映射并将结果记录在浏览器控制台中。
结论
sourcemapped-stacktrace是一个非常方便且易于使用的npm包，它可以帮助我们轻松地将压缩后的JavaScript堆栈跟踪映射回原始源代码。这个工具在调试和解决JavaScript错误时非常有用，并且可以大大提高我们的生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52366