Question

我在Chrome中安装了react developer tools扩展程序，如果查看扩展程序列表，则会将其列为已启用。但是，在顶部菜单栏上，我有元素，控制台，源等，没有React选项卡。我可以打开我的一个反应原生源文件，甚至在其中的断点处停止。

在自述反应开发工具gihub repository的自述文件中，它说明了

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-native，相关版本是

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

如果我进入react-native网站，React选项卡会显示出来，所以它可能与我的react-native设置有关。当我检查我的react-native应用程序时，如何显示React选项卡？

Answer 1

目前无法使用devtools中的“React”选项卡来检查应用小部件。这是因为devtools插件中应用程序脚本的评估方式发生了变化。它们现在在Web Worker中运行，插件不知道这一点，因此无法与React Native正常通信。

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

您可以按照github上的建议尝试http://nuclide.io/docs/platforms/react-native/#debugging__element-inspector，但我不能让它与RN 0.21一起使用

Answer 2

我一直在使用网络和移动设备中的反应并用于调试网络中反应选项卡中的反应元素但是当我们进行反应原生时反应选项卡不会出现

幸运的是，有一个名为nuclide的工具可以完美地调试反应 - 本机完美地遵循以下步骤：

安装名为nuclide的原子插件

从安装核素开始：

apm install nuclide

如果打开
转到atom中的Nuclide菜单 - ＆gt;反应 - ＆gt;切换Inspector将显示消息“Connecting to React”或者当你还没有启动反应包装器时它会说“等待连接”
这是可选的，当核素说未找到流量模块时流动，因此你需要安装在原子插件下面，以使反应检查员与反应本机一起工作。

 npm install --save-dev flow-bin

确保在您的react-native项目中安装它并使用以下命令启动项目：

react-native run-android

这将使您的react-native检查器启用设备上显示的元素，Done！

注意：您可以使用inspector执行一些有趣的操作（对于本地调试有很多帮助）：

点击UI上的任何元素，并在检查器中加载元素您可以类似地更改运行时样式如何在Web中更改css

在反应原生应用上，Chrome的反应开发工具没有显示React选项卡

2 个答案: