Here are some different ways to debug a react native application .
- use console.log (“debug message”) . Using this you can open up the console and see what sections of the code is being executed and what the values are for the variables etc. This is simple , but painful to code all of these debug statements
- The second method would be to enable remote debugging and use chrome to debug the react native app. Basically open up the simulator , load the menu in the expo client and enable remote debugging. This will open up a chrome session and now you can leverage chrome to debug the source code . You can use the source tab and set breakpoint, set watch variables, use the network tab to look at api calls etc . Make sure to select the pause on caught exceptions and reload the app
- use the debug configuration within vs code and leverage vs code to debug the java script, Ensure the debug configuration is set to attach to packager and the react native port is set correctly -> in my case it came up to 19000 , the default is 8081 . You cannot use the vs code and chrome at the same time , since the same port is being used
- Click on the debug icon , create a launch.json file , select the react native environment
select the options
this will create the debug configuration , these configuration can now be accessed in the debug menu – select attach to packager
and then select the green play button and this should start the debugger
go to settings and change the port for react-native packager port
if you run into an error like this
you may have a chrome session open to the port and you should close the browser that says react native debugger and has this in the address link http://localhost:19000/debugger-ui/
now when you run the debug configuration , you should see the screens with the debug session active and now you can use vscode to look at the error
once you are done with debugging , click on the chain icon to stop the debug session and in the expo menu , disable remote debugging and reload the application.