Enable debugging with React Native + Visual Studio Code + iPhone device + Expo

Setup Debugging on Visual Studio Code

1. Make sure you have expo-cli installed globally - if not, run: npm install -g expo-cli
2. Open Visual Studio Code
3. Click: Control + Shift + D to Open Run and Debug window
4. If you have never set this up before, select the Create a launch.json file under Run and Debug button
5. If you had a launch.json file before, select the option Add Config (your workspace name)
6. Select React Native
7. Click Debug Application
8. Click Exponent
9. Select Application in Direct mode
10. Select Tunnel 
11. Save the file
12. launch.json file should be ready

Start the debug session

1. Note: if you are missing some library, Expo will remind you to install. Follow the instruction if required
2. Re-open Run and Debug window if not yet opened (Control + Shift + D to open)
3. Select "Debug in Exponent" on the drop down list box
4. Click F5 to start the debugging session
5. Expo QR Code window should show up on the right handside
6. Open Expo Go (download if not yet installed
7. Scan the code with your camera
8. Select Open on Expo Go option
9. Once the app opened, on the iOS device, shake the phone and enable Debugging
10. Set a few breakpoints on your code and give it a try

Debugging

1. F10 to step over
2. F5 to continue
3. F11 to step in

Additional websites if you need further support

1. https://blog.logrocket.com/debugging-react-native-vs-code/