Debugging React Native Apps in VSCode

To debug React Native apps in VSCode, we have to install React Native Tools extension in VSCode.

To setup debugging, go to debug panel -> create a launch.json file -> From the menu, select React Native.

This launch.json file will contain the debug configurations for our app. This file is located in the .vscode folder inside our app root folder.

Then, from the menu, select Attach to packager.

To add another configuration to the app, you can follow either of the methods below.

1. Open the launch.json file -> click Add Configuration option shown at the bottom right corner.
2. Run menu -> Add Configuration

Then, from the context menu search for “reactnative” and you’ll find various debug configurations.

To debug the app, go to Debug panel in VSCode -> select the debug configuration you want to run from the menu -> Click on the play button.

We can see the debug logs in the Debug Console (View menu -> Debug Console)

By default when we try to run, Attach to packager configuration, it will connect to packager running on port 8081.

To change the default port to something else, go to Code Menu -> Preferences -> Settings -> Under user tab, search “react-native.packager.port”