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 MBP2015 and enabled Developer Options and USB Debugging but when I select Debug Android in VSC, I get this

[Error] "Could not debug. Android project not found."

I have attached picture of this, too.

If I want to debug on IOS simulator, I select Debug IOS in VSC but then I get this and simulator is not started

[vscode-react-native] Prewarming bundle cache. This may take a while ...
[vscode-react-native] Building and running application.
[vscode-react-native] Executing command: react-native run-ios --simulator
Scanning 772 folders for symlinks in /Users/me/reactnativework/my-app/node_modules (4ms)
ENOENT: no such file or directory, uv_chdir
[Error] "Could not debug. Error while executing command 'react-native run-ios --simulator': Error while executing command 'react-native run-ios --simulator'"

I have seen few posts here about similar problem but none are answered or are not same issue like I have.

How do I debug a simplest possible React Native app using break points so I can follow how code executes in Visual Studio Code?

Here is my launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Android",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Attach to packager",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "attach",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug in Exponent",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "exponent",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        }
    ]
}

Answer 1

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

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

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.

Answer 4

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 5

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 6

    { "version": "0.2.0", "configurations": [
{
        "name": "Debug Android",
        "type": "reactnative",
        "request": "launch",
        "platform": "android",
        "sourceMaps": true,
        "cwd": "${workspaceFolder}"
    },
    {
        "name": "Debug iOS",
        "type": "reactnative",
        "request": "launch",
        "platform": "ios",
        "target": "iPhone 11 Pro Max",
        "sourceMaps": true,
        "cwd": "${workspaceFolder}"
    },
    {
        "name": "Debug Attach",
        "type": "reactnative",
        "request": "attach",
        // "platform": "ios",
        // "target": "iPhone 8",
        "sourceMaps": true,
        "cwd": "${workspaceFolder}"
    },
    {
        "name": "Debug Device iOS",
        "type": "reactnative",
        "request": "launch",
        "platform": "ios",
        "target": "device",
        "runArguments": ["--device"],
        "sourceMaps": true,
        "cwd": "${workspaceFolder}"
    }

] }