`。 。 。 .
### < 目标检查者 / >
喜欢 `console.log`将它视为美化的版本 `JSON.stringify(data, null, 2)
`。 。 。 .
#### 如何运作
树状态保存为根. 如果点击扩展层次结构中的一些元素,则元素被卸载后状态将被保留.
#### API 密码
本部分接受下列道具: pro
**`data: PropTypes.any`数字 :** 您想要检查的 Javascript 对象
**`name: PropTypes.string`数字 :** 指定根节点的可选名称,默认为 `undefined`
**`expandLevel: PropTypes.number`数字 :** 指定该树最初应扩展到哪个水平的整数
**`expandPaths: PropTypes.oneOfType([PropTypes.string, PropTypes.array])`数字 :** 包含组件初始化时应当扩展的所有路径的阵列,或仅一个路径的串
- 路径字符串类似于 [乔森帕斯](https://goessner.net/articles/JsonPath/)。 。 。 .
- 这是一个点分隔的字符串像 `$.foo.bar`。 。 。 . `$.foo.bar` 扩展路径 `$.foo.bar` 地点 `$` 是指根节点。 注意它只扩展出该单节点(但并非其所有的父母和根节点). 相反,你应该使用 `expandPaths={['$', '$.foo', '$.foo.bar']}` 向着世界扩展 `$.foo.bar` 节点.
- 您可以使用 `['$', '$.1']`
- 您可以使用通配符扩展特定关卡上的所有路径
- 例如,扩展所有一级和二级节点,使用 `['$', '$.*']` (相当于 `expandLevel={2}`(中文(简体) )
- 结果与扩展合并
**`showNonenumerable: PropTypes.bool`数字 :** 显示不可假定属性
**`sortObjectKeys: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])`数字 :** 用可选比较函数排序对象密钥
何时 `sortObjectKeys={true}` 提供对象的密钥,除数组外,按字母顺序排序.
**`nodeRenderer: PropTypes.func`数字 :** 使用自定义 `nodeRenderer` 使对象具有属性(可选)
- 而不是使用默认 `nodeRenderer`您可以提供 用于渲染对象属性的自定义函数 。 这个 _默认_ 节点朗德看起来像这样:
```js
import { ObjectRootLabel, ObjectLabel } from 'react-inspector'
const defaultNodeRenderer = ({ depth, name, data, isNonenumerable, expanded }) =>
depth === 0
?
: ;
```
**`replacer: PropTypes.func`数字 :** 使用自定义 `replacer` 要替换对象属性, 如 `replacer` 参数 `JSON.stringify` (可选)
```js
import { ObjectInspector } from 'react-inspector'
const replacer = ({ data }) => {
// replace the array data with the first 10 elements
if (Array.isArray(data)) {
return data.slice(0, 10);
}
return data;
}
const MyComponent = ({ data }) =>
```
### <表检查者 / >
喜欢 `console.table`。 。 。 .
#### API 密码
本部分接受下列道具: pro
**`data: PropTypes.oneOfType([PropTypes.array, PropTypes.object])`数字 :** 您想要检查的 Javascript 对象, 无论是数组还是对象
**`columns: PropTypes.array`数字 :** 您要在表格中显示的列名阵列
###
#### API 密码
本部分接受下列道具: pro
**`data: PropTypes.object`数字 :** 您想要检查的DOM节点
#### 使用量
```js
import { ObjectInspector, TableInspector } from 'react-inspector';
// or use the shorthand
import { Inspector } from 'react-inspector';
const MyComponent = ({ data }) =>
let data = { /* ... */ };
ReactDOM.render(
,
document.getElementById('root')
);
```
尝试将检查人员嵌入到组件的渲染()方法中,为道具/状态提供活视图(热重装效果更好).
### 更多实例
查查故事书更多例子.
```sh
npm install && npm run storybook
```
打开 [http://localhost:9001/ (英语)](http://localhost:9001/)
## 主题
通过指定 `theme` 您可自定义检查人员. `theme` 道具可以是
1. 指预设主题的字符串( t)`"chromeLight"` 或者说 `"chromeDark"`默认为 `"chromeLight"`(中文(简体) )
2. 或提供必要变量的自定义对象。 离职 [`src/styles/themes`](https://github.com/storybookjs/react-inspector/tree/master/src/styles/themes) 用于可能的主题变量.
**示例1:** 使用预设主题 :
```js
```
**实例2:** 通过继承铬光主题来改变树节点缩进:
```js
import { chromeLight } from 'react-inspector'
```
## 路线图
视察员类别:
- [x] 树型
- [x] 常见对象
- [x] DOM 节点
- [x] 表格样式
- [ ] 列增压器
- [ ] 组样式
## 捐款
欢迎各方作出贡献. [以往贡献者](https://github.com/storybookjs/react-inspector/graphs/contributors)
## 额外
- 如果你打算抓获 `console.log`s,你也许想看看 [`console-feed`](https://www.npmjs.com/package/console-feed)。 。 。 .
- `react-object-inspector` 软件包将被贬值. `` 现在是新软件包的一部分 `react-inspector`。 。 。 .
- 为什么是内线风格? [本文件](https://github.com/erikras/react-redux-universal-hot-example/blob/master/docs/InlineStyles.md) 总结清楚.
## 常见问题
### @basemachina/react-inspector 是什么？
浏览器 DevTools 检查器在您的 React app 内的力量
### 如何安装 @basemachina/react-inspector？
在项目目录运行 npm install @basemachina/react-inspector，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @basemachina/react-inspector 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @basemachina/react-inspector 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @basemachina/react-inspector 可以商用吗？
@basemachina/react-inspector 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @basemachina/react-inspector 的下载量有多少？
根据 npm 官方下载统计，@basemachina/react-inspector 在 2026/10/08 – 2026/11/06 这 30 天内被下载 5,151 次，日均约 172 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @basemachina/react-inspector 还在维护吗？
最新版本 8\.1\.1 发布于 2025/10/03（1\.1 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/10/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。