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"
        }
    ]
}

Tunvir Rahman Tusher · Answer 1 · 2018-04-26T06:35:15.407

9

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!

edited Apr 26 '18 at 06:35

answered Apr 24 '18 at 03:24

Tunvir Rahman Tusher

6,421
2
37
32

Does your breakpoints stay active after making changes and saving? – Rudolph Opperman Apr 25 '18 at 11:38
No.. its disabled most of the time. are you having the same issue? – Tunvir Rahman Tusher Apr 26 '18 at 03:14
Yeah its very frustrating. I need to stop debugging and start it again in VS code every time I make a change. – Rudolph Opperman Apr 26 '18 at 07:54
@RudolphOpperman Do you have any update regarding this issue? if yes pls share it here. – Tunvir Rahman Tusher May 07 '18 at 05:32
Unfortunately not. I just kinda figured out a work around. But seeing as it was just for a fun project that was good enough. – Rudolph Opperman May 18 '18 at 09:22
Debug JS Remotely was what I was missing. Thanks! – phatmann Oct 19 '18 at 18:59
@RudolphOpperman have you checked the latest VSCode.Now breakpoint stays after making changes and saving.@ – Tunvir Rahman Tusher Oct 20 '18 at 08:20
@TunvirRahmanTusher Na I haven't used react native in a while. I will go update everything tonight and see if my issue still exists. – Rudolph Opperman Oct 26 '18 at 12:35
@TunvirRahmanTusher Can you please state the VS code version? I'm using the latest version of VS code with TS for my React native proj and every change and save loses the breakpoint with error for source maps. – Akash Gorai Aug 22 '21 at 08:35
@AkashGorai Version: 1.59.0 – Tunvir Rahman Tusher Aug 22 '21 at 10:26
It is still the same for Typescript projects unfortunately. Debugger won't work with breakpoints once you change the code. – Akash Gorai Aug 26 '21 at 08:36

Ganesh Cauda · Answer 2 · 2017-10-10T06:09:56.723

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

Run packager and debugger using vs code :Debug Android/ Debug iOS
Using exponent
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.

Hi Ganesh, that sounds complicated. "Start external package....". ??? — pixel, Oct 15 '17 at 18:39
Doing this I run into the error "ReferenceError: fetch is not defined" in " debuggerWorker.js:135" — Dennis, Oct 17 '18 at 13:36

score 6 · Answer 3 · answered Feb 15 '19 at 14:03

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

score 3 · Answer 4 · answered May 21 '19 at 09:50

3

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.

answered May 21 '19 at 09:50

gprathour

14,813
5
66
90

score 0 · Answer 5 · answered Mar 07 '22 at 12:09

    { "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}"
    }

] }

score -1 · Accepted Answer · answered Oct 15 '17 at 18:40

-1

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

answered Oct 15 '17 at 18:40

pixel

9,653
16
82
149

1

In fact, if you have the chrome extension enabled and connected, the debugger will say another debugger is already listening. You need to disable the chrome extension for the VSC plugin to connect. – Eduardo Chongkan Jul 03 '19 at 23:46

Debugging in Visual Studio Code?

6 Answers6

Linked