简介
在前端开发中，经常会遇到需要对一些数据进行调试的情况，并且我们通常会使用 console 打印出这些数据来查看。然而，在实际开发过程中，由于数据结构复杂或者引用关系错综复杂，使用 console.log 打印的数据信息往往难以阅读或者理解，这时候 @znemz/js-common-debug-clone 这个npm包就能够很好地解决这个问题。
安装
可以直接通过 npm 安装 @znemz/js-common-debug-clone：
--- ------- ---------------------------- ----------
使用教程
普通使用
下面是@znemz/js-common-debug-clone的较为基本的使用例子：
----- ----- - ----------------------------------------
----- --- - -
-- --
-- -
-- --
-- -
-- -
-
-
--
------------------------运行结果如下所示：
-
-- --
-- -
-- --
-- -
-- -
-
-
-我们可以发现，通过该 npm 包的辅助，我们输出的内容非常整洁清晰。
高级用法
@znemz/js-common-debug-clone除了上面的常规用法，还有一些高级用法，可以帮助我们更好地进行调试。
使用 maxDepth 属性限制深度
由于数据结构复杂，在进行调试的时候，对象的深度可能会非常深，这时候我们就可以使用 maxDepth 属性来设置对象的最大遍历深度，防止卡死控制台。
----- ----- - ----------------------------------------
----- --- - -
-- --
-- -
-- --
-- -
-- -
-
-
--
---------------------- ----我们设置了 maxDepth 的值为2，运行结果如下所示：
-
-- --
-- -
-- --
-- - -
-
-可以看到，由于 maxDepth 的限制，属性 d 的值并没有被遍历出来，从而避免了过多的输出。
使用 excludeKeys 属性忽略指定属性
有时候，我们并不关心对象中的所有属性信息，而只想要输出我们关心的一些属性，这时候就可以使用 excludeKeys 属性来指定我们不需要输出的属性。
----- ----- - ----------------------------------------
----- --- - -
-- --
-- -
-- --
-- -
-- -
-
--
-- -------
-- ----- ---- ----
--
---------------------- --------- ----- -------我们设置了 excludeKeys 的值为 ['b', 'g']，运行结果如下所示：
- -- -- -- ------ -
使用 includeKeys 属性只输出指定属性
如果我们只关心对象中的部分属性，也可以使用 includeKeys 属性来指定我们只需要输出的属性。
----- ----- - ----------------------------------------
----- --- - -
-- --
-- -
-- --
-- -
-- -
-
--
-- -------
-- ----- ---- ----
--
---------------------- --------- ----- ----- -------我们设置了 includeKeys 的值为 ['a', 'f']，运行结果如下所示：
- -- -- -- ------ -
总结
@znemz/js-common-debug-clone这个 npm 包的应用在前端开发中非常方便，通过它，我们可以快速、方便地进行数据调试。除了我们介绍的上述用法外，@znemz/js-common-debug-clone 还有其他比较高级的用法可以适用于不同的场景，需要时大家可以自行深入学习。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f072c45403f2923b035bf94