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

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

1.Globally install

npm install react-devtools

2. If you get EACESS error because of permission problem then try with following command

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

3.Then in our project directry give command

react-devtools

It will open separate app React Native deveveloper tools

4.copy the script from the app and paste it into our component and inspect it

Answer 3

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