有许多前端开发者一定遇到过这样的问题：代码中充斥着大量的 console.log 语句，难以维护和调试。而我们又不能一直将他们全部注释掉，一般的做法就是将这些语句打印的内容挖掘出来，然后删除或者注释掉这些语句。但如果你还不知道 npm 包 litter-box 的话，那么这篇文章将介绍如何使用这个优秀的工具来替代 console.log。
简介
litter-box 是一款用于调试 JavaScript 代码的工具，它能代替 console.log 输出语句。使用它可以提高代码调试的效率。
安装
你可以通过 npm 来安装它，命令如下：
npm install -g litter-box
安装完成后，你就可以开始使用囖~
基本使用
使用 litter-box 的方式非常简单。只需要使用 dump() 方法即可。
const lb = require('litter-box');
let x = 1;
let y = 2;
lb.dump(x, y);上面的代码会输出这样的结果：
[1] [2]
同时，还可以使用 dumpln() 方法打印换行。使用如下：
lb.dumpln(x, y);
输出结果：
[1] [2]
高级使用
列表嵌套
有时我们需要输出列表嵌套的数据，这时候就需要使用到 dumpDeep() 方法。
let arr = [
[1, 2],
[3, 4]
];
lb.dumpDeep(arr);输出结果：
[[1] [2]] [[3] [4]]
对象
使用 dumpObj() 方法可以输出对象类型的数据。
let me = {
name: '小王',
age: 20,
gender: '男'
};
lb.dumpObj(me);输出结果：
{"name": "小王", "age": 20, "gender": "男"}同时，还可以使用 dumpObjDeep() 方法输出嵌套对象的数据：
-- -------------------- ---- -------
--- -- - -
----- -----
---- ---
------- ----
----- -
----- -----
---- ---
------- ---
-
--
-------------------输出结果：
-- -------------------- ---- -------
-
------- -----
------ ---
--------- ----
------- -
------- -----
------ ---
--------- ---
-
-占位符
为了方便给输出的内容添加注释，例如调试用等特殊用处，我们可以使用占位符 %s。
let x = 1;
let y = 2;
lb.dump('x=%s,y=%s', x, y);输出结果：
x=1,y=2
调试时分组
有时候我们输出的数据太多，难以一目了然。这时候可以使用 dumpGroup() 方法，将输出的数据分组，便于调试。
-- -------------------- ---- -------
------------------- -------- -- -
--- - - --
--- - - --
-------------- ------ -- ---
---
------------------- -------- -- -
--- -- - -
----- -----
---- --
--
-------------------
---输出结果：
-- -------------------- ---- -------
--------------------------
- ---
--------------------------
---- ---
--------------------------
- ---
--------------------------
-
------- -----
------ --
-总结
通过这篇文章，你应该可以了解到，litter-box 是一款非常实用的工具，在开发调试中有很多用处。希望你能够善加利用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557bc81e8991b448d4c65