Very new to React Native - Debugging in Visual Studio Code?

There are several ways to enable break point debugging using vs code

1. Run packager and debugger using vs code :Debug Android/ Debug iOS
2. Using exponent
3. Attach to packager

As far as my experience, the most stable debugging in vs code is by using the third option, Attach to packager.

To use this, you can start an external packager (from command line i.e) and attach the debugger to that packager port.

    {
        "name": "Attach to packager",
        "program": "${workspaceRoot}/.vscode/launchReactNative.js",
        "type": "reactnative",
        "request": "attach",
        "port": 19002, // change this with your port
        "sourceMaps": true,
        "outDir": "${workspaceRoot}/.vscode/.react"
    },

The other 2 options always causing multi instance packager and causing packager error, end up with spending time killing the port. At least for me, using attach to packager is a lot more comfortable.

If you create the app by using exponent, then you won't be able to run the Debug Android/Debug iOS, the only option is by using the Debug in exponent or you still can use attach to packager with same method as before.

Follow these steps

• Install Extension React-native Full Pack

• Create Launch.json

• Select Debug iOS or Android .Add Breakpoint and enjoy.

Note: Please make sure you enable Debug JS Remotely

Now grab a coffee and enjoy!

There is a way to do it with just one click of a button. Debugger will attach to packager after the simulator is started and packager is already running. Configure launch.json file like this:

  "configurations": [
    {
      "name": "Debug",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "attach",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react",
      "port": "8081",
      "address": "localhost",
      "preLaunchTask": "npm: debug:dev"
    },
  ]

And in package.json you just need to add new script:

  "scripts": {
    "debug:dev": "react-native run-ios --scheme 'My project scheme' --configuration 'Debug' --simulator 'iPhone 8'",