Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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"             } 
like image 759
bitbonk Avatar asked Apr 28 '17 09:04

bitbonk


People also ask

Can JavaScript be debugged?

But fortunately, all modern browsers have a built-in JavaScript debugger. Built-in debuggers can be turned on and off, forcing errors to be reported to the user. With a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing.

Why is JavaScript so hard to debug?

What makes JavaScript great is also what makes it frustrating to debug. Its asynchronous nature makes it easy to manipulate the DOM in response to user events, but it also makes it difficult to locate problems.

Is VS Code good for debugging?

Visual Studio Code includes an interactive debugger, so you can step through source code, inspect variables, view call stacks, and execute commands in the console. VS Code also integrates with build and scripting tools to perform common tasks making everyday workflows faster.


2 Answers

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

like image 174
Uwe Hafner Avatar answered Sep 22 '22 21:09

Uwe Hafner


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

enter image description here

and either on javascript ( I used typescript tsx )

enter image description here

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

like image 24
Lorenzo Delana Avatar answered Sep 22 '22 21:09

Lorenzo Delana