React Native - 如何检查UI /元素？

Question

我已经安装了react开发工具。但是当我在模拟器上启动我的应用时，我无法看到它是我的Chrome浏览器。

如果你看这个youtube clip，你会看到反应标签在列表中，你可以检查你的应用的用户界面。

知道为什么吗？

如果我的Chrome上没有使用react dev工具，我该如何检查应用的UI /元素？

Answer 1

Devtools＆＃34; React＆＃34;目前无法实现。这是因为devtools插件中应用程序脚本的评估方式发生了变化。您可以在https://facebook.github.io/react-native/docs/known-issues.html#devtools-react-tab-does-not-work

查看更多信息

但是，您仍然可以在应用程序中调试UI。要检查元素，请在模拟器中打开您的应用程序＆gt;按Cmd + D＆gt;选择“显示检查器”。

Answer 2

步骤1：使用以下命令全局安装react-devtools软件包：         npm install -g react-devtools

第2步：转到项目目录并运行项目

步骤3：打开其他命令提示符并转到Project Directory并运行以下命令         反应-devtools

第4步：它将打开＆＃34;反应开发人员工具＆＃34;

步骤5：现在在Emulator上按Ctrl + M并选择Toggle Inspector

步骤6：现在您可以在React Developer Tools中进行检查

了解更多信息，请访问https://facebook.github.io/react-native/docs/debugging.html#react-developer-tools enter image description here

Answer 3

1。全局安装

npm install react-devtools

1. 如果由于权限问题而收到EACESS错误，请尝试使用以下命令

   sudo npm install -g react-devtools --unsafe-perm = true

3。然后在我们的项目目录中给出命令

react-devtools

它将打开单独的应用程序React Native开发人员工具

4。从应用程序中复制脚本并将其粘贴到我们的组件中并进行检查