Obromios Obromios - 1 month ago 10
React JSX Question

React tab is not showing with Chrome's react developer tools on a react-native app

I have installed the

react developer tools
extension in Chrome, and if I look at the list of extensions, it is listed as enabled. However, on the top menu bar, where I have Elements, Console, Sources etc, there is no React tab. I can open one of my react-native source files and even stop at a breakpoint in it.

In readme of the react developer tools gihub repository it states

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.


In my app folder, I am not using react directly, but I am using react-native and the relevant versions are

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


If I go to the react-native site, the React tab shows up, so it is probably something to do with my react-native setup. How do I get the React tab to appear when I am inspect my react-native app?

Answer

It's currently not possible to use the "React" tab in the devtools to inspect app widgets. This is due to a change in how the application scripts are evaluated in the devtools plugin; they are now run inside a Web Worker, and the plugin is unaware of this and so unable to communicate properly with React Native.

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

You can try http://nuclide.io/docs/platforms/react-native/#debugging__element-inspector as was suggested in issue on github, but I can't get it to work with RN 0.21