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

Question

I followed the instructions for debugging in VSCode as per

https://github.com/Microsoft/vscode-react-native

I attached my Nexus 6P with USB cable with my MBP

Answer 1

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.