在前端开发中，有时候我们需要查看一个对象或者数组的属性和值，以方便我们调试和开发。这时候可以使用 npm 包 @tableflip/react-inspector 来帮助我们查看一个对象或者数组的属性。
安装
@tableflip/react-inspector 可以通过 npm 进行安装。
npm install @tableflip/react-inspector --save
使用
在需要查看对象或者数组的地方，我们可以引入 @tableflip/react-inspector 并传入相应的数据。可以是一个普通的对象或者数组。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -----------------------------
----- ----- - -
----- -------
---- ---
------ -------------------------------
-
-------- ------------- -
------ -
-----
---------- ------------ --
------
--
-
------ ------- ------------这里我们将对象 myObj 传入 Inspector 内，@tableflip/react-inspector 会自动将其渲染成一个树形结构，方便我们查看。
配置
@tableflip/react-inspector 可以通过传入 props 进行配置，以下是部分常用的 props：
- data: 传入要查看属性的对象或者数组，类型可以是 string、number、boolean、function、array、object、date、regExp、symbol、map、set 等。
- name: 在显示的时候可以给根节点命名，表示节点是从何而来的。这里可以填入对象名称，数组下标等等。
- theme: 配置样式风格，可以选择 chromeLight、chromeDark、monokai、solarized、react。默认值是 chromeLight。
- expandLevel: 设置展开节点的层数，从最高层开始。默认值是 1，即只展开第一层。
- showNonenumerable: 是否显示对象中不可枚举的属性。默认值是 false，即不展示。
- showNonEnumerable: 是否显示对象中不可枚举的属性。默认值是 false，即不展示。
- showNonConfigurable: 是否显示对象中不可配置的属性。默认值是 false，即不展示。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -----------------------------
----- ----- - -
----- -------
---- ---
------ -------------------------------
-
-------- ------------- -
------ -
-----
----------------
---------- ------------ --------------- ------------------------ -------------------------- --
------
--
-
------ ------- ------------这里我们展示了一个对象的属性和值，将扩展层数设置为 2，同时展示了不可枚举和不可配置的属性。
总结
@tableflip/react-inspector 给前端开发者提供了一个快速查看对象和数组属性的好工具，同时通过在 Inspector 内部传入不同的 props，可以轻易的配置出自己想要的样式和展示形式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f87238a385564ab6ceb