Disclaimer: Please approach this post as if a friend is guiding you through last-minute exam preparation rather than relying on it as formal reference documentation.
At the time of writing this, Expo has a known issue related to debugging. If you are a nerd, find the reference links attached to read about the issues.
If you are using VS Code, follow the first 2 steps and scroll below.
1. Issue#1 and Workaround
- Read about issue here
Workaround:
- In your
package.jsonfile, include the below line to your scripts.
"debug": "npx cross-env EXPO_NO_CLIENT_ENV_VARS=1 expo start"
2. Issue#2 and Workaround
- Read about issue here
Workaround
- In your
tsconfig.jsonfile, include the below line.
"sourceMap": true,
3.1 Set up Debug in Webstorm
- In your Expo project, create a Run/Debug Configuration as follows.
- Change the Bundler Host to
127.0.0.1(localhost won't work, it has to be 127.0.0.1) - Change the Bundler Port if required.
- Change the Bundler Host to
3.2 Customizing the Debug Configuration
- Click on the “Start React Native Bundler” and then click on the “✏️” icon above and update the following.
- For the Script, select "debug" (debug is the name of the script we added in Step-1)
4. The One where we start debugging
- Start “Debug”
- You will be shown the following options. Choose
React Native Experimental (Improved Chrome Reloads)
5. Now, open the app and you should be able to debug your application properly.
Debugging in VS Code
If you are a newbie, I recommend watching this YouTube video from Expo.
Then, follow the steps here to start with debugging. (Don't forget to start your application with the debug script that we configured in step#1. The command will be "npm run debug" instead of "npm start" or "npm run dev")
Top comments (0)