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