Debug both javascript and c# in ASP.NET Core MVC using VS Code

Question

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

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
– 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
– Gi1ber7, Commented Jun 5, 2017 at 17:55
@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
– bitbonk, Commented Jun 6, 2017 at 21:35

Uwe Hafner · Accepted Answer · 2017-06-03 06:40:19Z

13

+50

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

edited Jun 3, 2017 at 6:40

answered Jun 1, 2017 at 9:22

Uwe Hafner

5,0083 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Jackson Over a year ago

Seems awesome, I did this exactly but my JavaScript breakpoints are still greyed out as an unverified breakpoint.

Auspex Over a year ago

@DanielJackson I think it has something to do with Source Maps. I've managed all sorts of ways to get the debugger started, but I still can't debug in VS Code

Lorenzo Delana · Accepted Answer · 2019-09-18 22:41:33Z

3

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.

answered Sep 18, 2019 at 22:41

Lorenzo Delana

6476 silver badges11 bronze badges

4 Comments

Muqq Over a year ago

I have the same setup with a .NET Core application and an Angular front-end. However, when I stop the debugging, it seems to stop the .NET Core application but the angular application is still running. Trying to stop it again results in "No debug adapter, can not send 'terminate'". Any idea what the issue might be? The debugging for front- and back-end works flawlessly.

Lorenzo Delana Over a year ago

Don't know if this can be of help, but as seen from sshoot I used chrome and in vscode I installed "Debugger for Chrome" extension.

Muqq Over a year ago

The add-on is installed and the debugging is working. It is more of an issue that the debugging session doesn't stop properly.

Lorenzo Delana Over a year ago

Ok, now I understood, I never seen that message but searching for that I found that seems a bug when the session stop; I suggest you to check if you use vscode insider after this change past to 5mar watching at releases from 1.43.0 it should ok I think.

Adam Rampazzo · Accepted Answer · 2022-03-06 21:53:49Z

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

Collectives™ on Stack Overflow

Debug both javascript and c# in ASP.NET Core MVC using VS Code

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related