React DevTools

React DevTools 可用于调试应用程序中的 React 组件层次结构。

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

npx react-devtools

💡 Installing React DevTools globally

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

Then, run the global react-devtools command:

react-devtools

💡 Adding React DevTools as a project dependency

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 的更多信息。

与元素检查器集成

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

当 React DevTools 连接时，元素检查器将进入 **折叠模式**，并使用 DevTools 作为主要 UI。在此模式下，点击模拟器中的某个元素将导航到 DevTools 中的相关组件。

您可以在同一菜单中选择“隐藏元素检查器”退出此模式。

调试应用程序状态

Reactotron 是一款开源桌面应用程序，允许您检查 Redux 或 MobX-State-Tree 应用程序状态，以及查看自定义日志，运行自定义命令（例如重置状态、存储和恢复状态快照），以及其他对 React Native 应用程序有用的调试功能。

您可以在 README 中 查看安装说明。如果您使用的是 Expo，这里有一篇文章详细介绍了 如何在 Expo 上安装。

故障排除

提示

运行 React DevTools 后，请按照说明操作。如果您在打开 React DevTools 之前已运行应用程序，您可能需要 打开开发者菜单 以连接它。

信息

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