在前端开发过程中，我们常常遇到需要在函数调用链路中定位问题的场景。这时，我们需要一款能够帮助我们进行调试和排错的工具。Context-tracer 就是这样一款优秀的 npm 包。 它为开发者提供了函数调用链信息的追踪功能，并且可以自定义上下文信息，方便我们深度定位问题。
安装使用
使用 npm 进行安装：
$ npm i context-tracer
在代码中通过以下方式进行调用：
-- -------------------- ---- ------- ----- ------------- - -------------------------- -------------------- -- ------ --- --------------------------- -- ---------- -------------------------
上下文信息添加
默认情况下，context-tracer 会将当前调用的函数名和文件名作为上下文信息，但是我们也可以通过配置项来自定义追踪信息。以下是常用的上下文信息添加：
请求上下文信息
在处理网络请求的过程中，我们常常需要将请求参数、http 头等信息打印出来为了深度定位问题，此时我们可以在请求中将信息加入上下文信息。
-- -------------------- ---- -------
----- ----- - -----------------
----- ------------- - --------------------------
-----
---------------------------- -
-------- -
---- -
-------- -
--------------- ---------
--
------- -
---- ------
--
--
--
--
-------- -- -
-- ---------
---函数传入参数
我们经常需要将函数调用时所带入的参数信息打印下来，context-tracer 支持通过传入参数的方式自定义上下文信息。
-- -------------------- ---- -------
-------- -------------------- ------- -
----- ------- - -
-------
-------
--
----------------------------------
---------------------------
-- ----------
-------------------------
-
------------------- -------自定义信息
我们还可以通过以下方式来进行自定义信息的添加：
const context = {
"自定义KEY": "自定义信息",
};
contextTracer.setContext(context);配置项说明
以下是常用的配置项说明：
enabled: {Boolean} 是否开启追踪，默认truegenerateShortId: {Boolean} 是否启用短 hash 模式，默认true，如果需要生成更长的 hash，可以关闭此选项triggerDepth: {Number} 触发追踪的深度，默认0logLevel: {String} 日志级别，默认warn， 可选值：debug,info,warn,errorlogFormat: {String} 日志输出格式，默认是[context-id](file:lineNumber) [functionName] [message]errorHandler: {Function} 错误处理器，用于自定义错误处理逻辑，默认会输出到console.error。
示例代码
最后，我们通过一个示例代码来演示 context-tracer 的使用。
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------- - --------------------------
----- ----- - -----------------
----- --- - ----------
------------------------
---------------- ----- ---- -- -
----- ------- - -
------- -----------
----- ---------
------ ----------
--
----------------------------------
---------------------------
--------------------------------- -
-------- -
---- -
------- -
---- ------
--
-------- -
--------------- ---------
--
--
--
---------- -- -
----------------------
-------- ----------
---
-------------------------
---------------- -- -
------------------------------
-------------------------
---
---
---------------- -- -- -
------------------- -- ------- -- -------
---你可以尝试在上述的代码执行过程中加入更多的上下文信息，以便对上下文信息的打印有更多的协助意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600574d581e8991b448ea29d