背景介绍
在前端开发中，我们经常需要输出调试信息帮助我们定位问题。而在输出大量变量时，经常需要手动不断地 console.log()，不仅效率低下，还需要手动拼接字符串。为解决这个问题，npm 包 spewer 应运而生。
spewer 是一个小型库，可以将你的对象变量直接打印到控制台，使得调试信息更加清晰可见。该库兼容浏览器端和 Node.js 环境，能够直接输出格式化的调试信息，帮助你更好地定位问题。
安装
使用 npm 进行安装：
npm install spewer --save
安装成功后，在你的项目中引用库：
import spew from 'spewer';
如果你的项目是基于浏览器端，你也可以通过 CDN 引用：
<script src="https://unpkg.com/spewer/dist/spewer.js"></script> <script> spew(/*...*/); // 直接在浏览器中使用 </script>
使用方法
spewer 的使用非常简单，你可以直接将你的变量传入 spew 函数中即可：
const obj = { name: 'spewer', version: '1.0.0', author: 'Tom Cruise' }; spew(obj);
以上代码会将 obj 对象打印到控制台：
{ "name": "spewer", "version": "1.0.0", "author": "Tom Cruise" }
spewer 会自动判断你的变量类型，并将其输出到控制台。你可以使用 Ctrl（Cmd）+ 鼠标左键单击，可以查看具体的变量信息。
除了对象，spewer 还可以接收其它类型的变量，例如，数组、字符串等：
const arr = [1, 2, 3, 4]; const str = 'hello spewer'; spew(arr); spew(str);
以上代码分别会将 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
