How do you debug React Native?

Question

How does one debug their React code with React Native while the app is running in app simulator?

Answer 1

1. Run your app in simulator - react-native run-ios
2. Press ctrl + d and click on Debug JS Remotely

1. webpage should open up at http://localhost:8081/debugger-ui , if not type the URL and go to this link in Chrome
2. Right click on the page and click Inspect and it should open the developer tools for chrome

3. Go to the sources in the top menu and find your js class file in the right hand side file explorer

4. You can put breakpoints to the view and debug the code in there as you can see in the image.