React 开发工具

React 开发工具 可用于调试应用中的 React 组件层次结构。

¥React DevTools can be used to debug the React component hierarchy within your app.

React DevTools 的独立版本允许连接到 React Native 应用。要使用它，请安装或运行 react-devtools 软件包。它应该在几秒钟内连接到你的模拟器。

¥The standalone version of React DevTools allows connecting to React Native apps. To use it, install or run the react-devtools package. It should connect to your simulator within a few seconds.

npx react-devtools

💡 Installing React DevTools globally

我们建议通过 npx 运行 react-devtools，但你也可以全局安装给定版本。

¥We recommend running react-devtools via npx, but you can also install a given version globally.

npm

npm install -g react-devtools

Yarn

yarn global add react-devtools

然后，运行全局 react-devtools 命令：

¥Then, run the global react-devtools command:

react-devtools

💡 Adding React DevTools as a project dependency

如果你希望避免全局安装，可以将 react-devtools 添加为项目依赖。使用 npm install --save-dev react-devtools 将 react-devtools 包添加到你的项目中，然后将 "react-devtools": "react-devtools" 添加到 package.json 中的 scripts 部分，然后从项目文件夹运行 npm run react-devtools 以打开 DevTools。

¥If you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

提示

了解有关在 React.dev 上的 React 开发者工具指南 中使用 DevTools 的更多信息。

¥Learn more about using DevTools in the React Developer Tools guide on react.dev.

与元素检查器集成

¥Integration with the Element Inspector

React Native 提供了一个 Element Inspector，可以在 Dev 菜单下以 "显示元素检查器" 的形式使用。检查器允许你点击任何 UI 元素并查看有关它的信息。

¥React Native provides an Element Inspector, available under the Dev Menu as "Show Element Inspector". The inspector lets you tap on any UI element and see information about it.

连接 React DevTools 后，Element Inspector 将进入折叠模式，并使用 DevTools 作为主要 UI。在此模式下，单击模拟器中的某些内容将导航到 DevTools 中的相关组件。

¥When React DevTools is connected, the Element Inspector will enter a collapsed mode, and instead use DevTools as the primary UI. In this mode, clicking on something in the simulator will navigate to the relevant component in DevTools.

你可以在同一菜单中选择 "隐藏元素检查器" 退出该模式。

¥You can select "Hide Element Inspector" in the same menu to exit this mode.

调试应用状态

¥Debugging application state

反应加速器 是一个开源桌面应用，允许你检查 Redux 或 MobX-State-Tree 应用状态以及查看自定义日志、运行自定义命令（例如重置状态、存储和恢复状态快照）以及 React 的其他有用的调试功能 原生应用。

¥Reactotron is an open-source desktop app that allows you to inspect Redux or MobX-State-Tree application state as well as view custom logs, run custom commands such as resetting state, store and restore state snapshots, and other helpful debugging features for React Native apps.

你可以查看安装说明 在自述文件中。如果你正在使用 Expo，这里有一篇详细介绍 如何在 Expo 上安装 的文章。

¥You can view installation instructions in the README. If you're using Expo, here is an article detailing how to install on Expo.

故障排除

¥Troubleshooting

提示

运行 React DevTools 后，请按照说明进行操作。如果你在打开 React DevTools 之前运行了应用，则可能需要 打开开发菜单 来连接它。

¥Once you have React DevTools running, follow the instructions. If you had your application running prior to opening React DevTools, you may need to open the Dev Menu to connect it.

信息

如果连接到 Android 模拟器很困难，请尝试在新终端中运行 adb reverse tcp:8097 tcp:8097。

¥If connecting to an Android emulator proves troublesome, try running adb reverse tcp:8097 tcp:8097 in a new terminal.