在前端开发中，我们常常需要跟踪某个变量或函数的执行流程，以便更好地理解代码的逻辑和排查问题。npm 包 what-is-happening 就是一款能够实现这一功能的工具，它可以对特定的变量或函数进行加注释，并在执行时输出相关信息，让我们更方便地了解代码的运行情况。
安装
使用 npm 命令进行安装：
npm install what-is-happening
使用方法
在要加注释的变量或函数上添加注释即可。注释的格式为 /*@whatsup*/，如下所示：
function foo() {
/*@whatsup*/ var a = 1;
console.log(a);
}
foo();执行后，输出的信息如下所示：
[whatsup] setting a to 1. Stack trace: foo (/tmp/foo.js:2:14) Object.<anonymous> (/tmp/foo.js:5:1) [whatsup] a is now 1. Stack trace: foo (/tmp/foo.js:2:14) Object.<anonymous> (/tmp/foo.js:5:1) 1
可以看到，what-is-happening 在执行时会输出相关信息，包括对变量 a 的赋值和值的变化情况，以及函数执行的堆栈信息，有利于我们更好地了解代码的运行情况。
配置
what-is-happening 提供了一些配置项，可以根据需要进行配置。比如，可以通过 WTH_ENABLED 环境变量来控制是否启用 what-is-happening：
-- -------------------- ---- ------- -- -- ----------------- ----------------------- - ------- -------- ----- - ------------ --- - - -- --------------- - ------
还可以通过修改 WTH_REPORTER 环境变量来使用自定义的输出格式，比如可以使用 json 输出格式：
-- -------------------- ---- ------- -- -- ---- ---- ------------------------ - ------- -------- ----- - ------------ --- - - -- --------------- - ------
输出结果如下所示：
-- -------------------- ---- -------
-
-
------- ----------
------ ----
-------- --
------------- -
-
------- ----------
------- --
--------- -
-
-
--
-
------- ----------
------ ----
-------- --
------------- -
-
------- ----------
------- --
--------- --
-
-
-
-缺点与注意事项
尽管 what-is-happening 提供了方便的调试功能，但使用过程中仍然需要注意一些事项。
首先，what-is-happening 会对代码的性能产生一定的影响，因为它需要对代码进行解析和注入。因此，在生产环境下，应该避免使用 what-is-happening，以免影响整体的性能表现。
其次，what-is-happening 只能对本地的代码进行调试，不能对远程的代码进行调试。因此，在需要对远程代码进行调试的情况下，需要结合其他工具进行使用。
最后，what-is-happening 也并不是万能的，它只能帮助我们了解代码的执行情况，而不能从根本上解决代码中的问题。因此，在进行代码调试的过程中，我们还需要结合其他工具和知识，进行更全面地分析和排查。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671098dd3466f61ffe024