React Native - how to inspect the UI/ elements?

Question

I have installed the react dev tool. But I can't see it my Chrome browser when I launch my app on the emulator.

If you watch this youtube clip, you can see the react tab is in the list and you can inspect your app's UI.

Any idea why?

How can I inspect the app's UI/ elements if the react dev tool is not working on my Chrome?

Answer 1

Devtools "React" is currently not possible. This is due to a change in how the application scripts are evaluated in the devtools plugin. You can see more at https://facebook.github.io/react-native/docs/known-issues.html#devtools-react-tab-does-not-work

However, you can still debug your UI within your application. To inspect elements, open your app in Simulator > press Cmd+D > select Show Inspector.

Answer 2

Step 1: Install the react-devtools package globally using this command : npm install -g react-devtools

Step 2: Goto your Project Directory and run project

Step 3: Open other command prompt and goto at Project Directory and run following command react-devtools

Step 4: It will open "React Developer Tools"

Step 5: Now at Emulator press Ctrl+M and select Toggle Inspector

Step 6: Now you can inspect in React Developer Tools

for more information go at https://facebook.github.io/react-native/docs/debugging.html#react-developer-tools