背景介绍
在前端开发中，我们经常需要输出调试信息帮助我们定位问题。而在输出大量变量时，经常需要手动不断地 console.log()，不仅效率低下，还需要手动拼接字符串。为解决这个问题，npm 包 spewer 应运而生。
spewer 是一个小型库，可以将你的对象变量直接打印到控制台，使得调试信息更加清晰可见。该库兼容浏览器端和 Node.js 环境，能够直接输出格式化的调试信息，帮助你更好地定位问题。
安装
使用 npm 进行安装：
--- ------- ------ ------
安装成功后，在你的项目中引用库：
------ ---- ---- ---------
如果你的项目是基于浏览器端，你也可以通过 CDN 引用：
------- ------------------------------------------------------- -------- -------------- -- --------- ---------
使用方法
spewer 的使用非常简单，你可以直接将你的变量传入 spew 函数中即可：
----- --- - - ----- --------- -------- -------- ------- ---- ------- -- ----------
以上代码会将 obj 对象打印到控制台：
- ------- --------- ---------- -------- --------- ---- ------- -
spewer 会自动判断你的变量类型，并将其输出到控制台。你可以使用 Ctrl（Cmd）+ 鼠标左键单击，可以查看具体的变量信息。
除了对象，spewer 还可以接收其它类型的变量，例如，数组、字符串等：
----- --- - --- -- -- --- ----- --- - ------ -------- ---------- ----------
以上代码分别会将 arr 和 str 打印到控制台。
深度输出
虽然 spewer 可以自动判断变量类型并输出，但如果你的变量是一个复杂嵌套的对象或者数组，spewer 只会输出第一层，这对于在执行调试时仍然不够方便。
为了解决这个问题，你可以在 spew 函数中传入一个额外的参数，以便 spewer 递归地输出所有层级的信息。
----- ---- - -
----- ---------
-------- --------
------- -
----- ---- --------
------ ---------------------
--
-------- -
----- ------
---- -------------------------------------
-
--
-- ----
-----------
-- ----
---------- - ------ -------- ---第一个 spew 输出结果：
-
------- ---------
---------- --------
--------- -
------- ---- --------
-------- ---------------------
--
---------- -
------- ------
------ -------------------------------------
-
-第二个 spew 输出结果：
-
------- ---------
---------- --------
--------- -
------- ---- --------
-------- ---------------------
--
---------- -
------- ------
------ -------------------------------------
-
-
- ------- ----
---- - ------
------- - -----
------ -
---- - --- ------
----- - ------------------
------- -
---- - ---
--- - -----------------------------------自定义输出样式
spewer 同样支持自定义输出样式，并且可以支持可点击的对象输出。你可以使用 styles 属性指定自定义的样式，例如：
----- ---- - -
----- ---------
-------- --------
------- -
----- ---- --------
------ ---------------------
--
-------- -
----- ------
---- -------------------------------------
-
--
---------- - ------ --------- ------- -
---- ------- ------ ------------ -------
------- ------- ------
------- ------- -------
------ ------- ---------
------- ------- ------------
-------- ------- --------
----以上代码指定了不同类型数据的不同输出样式，该样式仅在浏览器环境下可用。
除此之外，spewer 还支持在对象上添加链接，以便点击后直接跳转到指定页面，该功能只在浏览器环境下可用。
----- ---- - -
----- ---------
-------- --------
------- -
----- ---- --------
------ -
-------- ----------------------
----- ----------------------------
-
--
-------- -
----- ------
---- -
-------- --------------------------------------
----- -------------------------------------
-
-
--
---------- - ------ --------- ------- -
---- ------- ------ ------------ -------
------- ------- ------
------- ------- -------
------ ------- ---------
------- ------- ------------
-------- ------- --------
----以上代码指定了在对象 data 中，email 属性和 url 属性分别指向一个链接，该链接可以在输出时自动添加到关键字上，并且可以在浏览器中点击跳转到指定链接。
结束语
使用 spewer 很容易将大量的变量信息清晰地输出到控制台中，非常方便。该库支持浏览器环境和 Node.js 环境，具有深度输出、自定义样式和可点击链接等实用功能，极大地提升了开发效率。
如果你还在手动地调用 console.log()，不妨尝试使用 spewer，相信它会为你的开发工作带来很大帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600670a58ccae46eb111f13d