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 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'",

Answer 2

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!

Answer 3

Found out that using Chrome allows debugging, tracing, breakpoints, tried it, working good

Answer 4

Another way can be to use React Native Tools extension provided by Microsoft on VS code to debug react native app within VS Code itself rather than Chrome.

Check all instructions in detail in my answer here.

Answer 5

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.