React选项卡没有在react本地应用程序上显示Chrome的app开发工具

Question

我已经在Chrome中安装了react developer tools扩展，如果我查看扩展列表，它将被列出为已启用。但是，在顶部的菜单栏中，我有元素、控制台、源代码等，没有React选项卡。我可以打开我的一个反应-本机源文件，甚至停止在它的断点。

在react工具gihub储存库的自述中，它声明了

The "React" tab won't show up if React can't communicate with the devtools. When the page loads, the devtools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that hook during initialization.

(In React 0.11 and older, it was necessary to expose a global called React for the devtools to function.)

You can test this on the React website or by inspecting Facebook.

在我的app文件夹中，我没有直接使用react，但是我使用的是react-原生的，相关的版本是

react-native-cli: 0.1.10
react-native: 0.21.0

如果我去的反应-本机网站，反应标签显示，所以它可能是一些与我的反应-本机设置。当我检查我的React本地应用程序时，如何让react选项卡出现？

Answer 1

目前不可能使用devtools中的"React“选项卡来检查应用程序小部件。这是由于在devtools插件中评估应用程序脚本的方式发生了变化；它们现在在Web工作者中运行，而且插件不知道这一点，因此无法与Reactive原住民进行适当的通信。

https://facebook.github.io/react-native/docs/known-issues.html#devtools-react-tab-does-not-work

您可以尝试在github上讨论的元素-检查员，但是我无法让它与RN0.21一起工作。

Answer 2

我在web和mobile中都使用了web，并用于调试web中web选项卡中的web元素，但是当我们开始使用react时，web选项卡就不会出现了。

幸运的是，有一个名为珠心的工具，它允许调试、反应--本机完美无缺地执行以下步骤：

安装名为核素的原子插件

从安装核素开始：

apm安装核素

1. 打开时重新启动原子编辑器
2. 转到原子-> React -> Toggle检查器中的核素菜单，它将显示消息“Connecting to react”，或者可能在您尚未启动时，它将显示“等待连接”。
3. 这是可选的stpe流有时，核素说，流模块找不到，因此，你需要安装下面的原子插件，使反应检查员与反应本机工作。

npm安装

请确保将此安装在您的反应性本机项目中，并以以下方式启动项目：

react本机运行-android

这将使您的反应-本机检查员启用显示在设备上的元素，完成！

注意:您可以使用检查器做一些有趣的事情(对反应本机调试有很大帮助)：

点击UI上的任何元素，并在检查器中弹出该元素，您可以更改运行时样式，类似地，如何更改web中的css。