Is there a way to set breakpoints and debug javascript and c# at the same time in VS Code (on macOS)?

I have installed the chrome debugger extension and then created a new MVC app using dotnet new mvc.

But when I launch the app breakpoint are only hit in the C# files, they stay grayed out in the js files (site.js) because no symbols have been loaded.

These are my launch settings (the only thing I have modified is osx command because chrome is not my default browser on macOS):

"version": "0.2.0",
   "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/Foo.PhotoSite.dll",
            "args": [],
            "cwd": "${workspaceRoot}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": true,
                "args": "${auto-detect-url}",
                "windows": {
                    "command": "cmd.exe",
                    "args": "/C start ${auto-detect-url}"
                },
                "osx": {
                    "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
                },
                "linux": {
                    "command": "xdg-open"
                }
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceRoot}/Views"
            }

Is there a way to set breakpoints and debug javascript and c# at the same time in VS Code (on macOS)?

I have installed the chrome debugger extension and then created a new MVC app using dotnet new mvc.

But when I launch the app breakpoint are only hit in the C# files, they stay grayed out in the js files (site.js) because no symbols have been loaded.

These are my launch settings (the only thing I have modified is osx command because chrome is not my default browser on macOS):

"version": "0.2.0",
   "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/Foo.PhotoSite.dll",
            "args": [],
            "cwd": "${workspaceRoot}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": true,
                "args": "${auto-detect-url}",
                "windows": {
                    "command": "cmd.exe",
                    "args": "/C start ${auto-detect-url}"
                },
                "osx": {
                    "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
                },
                "linux": {
                    "command": "xdg-open"
                }
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceRoot}/Views"
            }

• javascript
• c#
• debugging
• visual-studio-code

• 1 Great question that deserves and answer. I don't see a way to do it and would love to know the official answer – Mr. Kraus Commented May 30, 2017 at 17:23
• Why do you need to debug in the same place? Separate the things; Use Chrome developer tools for your html,js, css, etc. files. After all, they are two different kind of animals. – Gi1ber7 Commented Jun 5, 2017 at 17:55
• 2 @Gi1ber7 Because IMHO that is the most obvious thing one would want to do when developing both frontend and backend at the same time. It is called frictionless development. Switching tools always comes at a cost espeically since VS Code is extremely good at debugging both JavaScript and .NET code - just not at the same (or so I thought - fortunately I was proven wrong by Uwe). – bitbonk Commented Jun 6, 2017 at 21:35

3 Answers 3

What you want to do is debug 2 different processes. With your configuration you debug the server. If you want to debug the browser as well you have 2 options.

First option, just start a second debug session. VS Code will automatically start multi-target debugging. You will want to start an "attach to chrome" session (see below for configuration sample) or "Launch chrome" session. After that you debug the chrome instance you picked or started and the server.

Second option, possibly more convenient if you do it a lot is to create a compound. Results in the same thing but you can start it with one click.
In this case you could remove your launch browser configurations that start your browser unless you attach to that instance.

To get it running you can try your browser configuration separately. Make chrome debugging work correctly (ignore the server) and then combine it in the compound.

Example with 2 chrome configurations for launching or attaching:

Configuration should look like this: Please keep in mind that I took it from my Windows machine in case there are special notations for macOS or different debugging ports.

{
    "version": "0.2.0",
    "configurations": [
        {
            // ...your configuration for .NET Core here... 
            // called .NET Core Launch (web)
        }
        {
            "type": "chrome",
            "request": "launch",
            "name": "LaunchChrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            // This one in case you manually start 2 debug sessions.
            // Like first .net core 
            // then attach to the browser that was started.
            "type": "chrome",
            "request": "attach",
            "name": "AttachChrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ],
    "compounds": [
        {
            "name": "Debug MVC and Chrome",
            "configurations": [".NET Core Launch (web)", "LaunchChrome"]
        }
    ]
}

Essentially you use 2 different debugging extensions. The .NET debugger extension and the chrome debugger extension. Hence the 2 different configuration parts.

Reference:
Microsoft calls it "multitarget-debugging" in VS Code. See the docs here: https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging

serverReadyAction recommended over launchBrowser

if you create a new reactredux net core application with dotnet new reactredux -n testreactredux browser launches but still not debuggable until change action to debugWithChrome as following

{
    "version": "0.2.0",    
    "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/netcoreapp3.0/testreactredux.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
            "serverReadyAction": {
                "action": "debugWithChrome", // <---- CHANGE HERE ( default is 'openExternally' )
                "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        }
    ]
}

this way if I place breakpoint on c# code debugger will hit

and either on javascript ( I used typescript tsx )

I noted that breakpoint on js code still gray at start but then it stop there correctly.

Works fine changing action "openExternally" to "debugWithChrome".

Less code and more functional than composing with "compounds". Thanks to Lorenzo Delana!

    "version": "0.2.0",    
    "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/netcoreapp3.0/testreactredux.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
            "serverReadyAction": {
                "action": "debugWithChrome", // <---- CHANGE HERE ( default is 'openExternally' )
                "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        }
    ]
}