问题
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?
回答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.
回答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
回答3:
1.Globally install
npm install react-devtools
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
来源：https://stackoverflow.com/questions/36638245/react-native-how-to-inspect-the-ui-elements