CODEWITHSUNDEEP
asp.netvue.jsasp.net-corevisual-studio-codevscode-debugger
Frank Furter
Frank Furter

Reputation: 508

How can I debug ASP.NET Core and Vue.js from VS Code?

I am trying to debug an ASP.​NET Core + Vue.js project from within VS Code to utilise the debugger tools available.

I can run the project in VS Code with F5, but breakpoints show as hollow with the note "No symbols have been loaded for this document". When running in VS Code, the Debug Console does output that symbols have been loaded for the project dll: Loaded 'C:\Projects\SoftwareAteliers-1.1.0\bin\Debug\netcoreapp2.2\AspNetCoreVueStarter.dll'. Symbols loaded.

The rest of the launch process works as intended, launching a browser and loading the Vue.js application.

The Github repo for the project can be found here (note that I'm not using the latest release of the repo due to needing ASP.NET Core 2.2).

I had to modify .vscode/launch.json as the repo wasn't referencing the correct .csproj file.

Before: "program": "${workspaceFolder}/bin/Debug/netcoreapp2.1/asp-net-core-vue-starter.dll",

After: "program": "${workspaceFolder}/bin/Debug/netcoreapp2.2/AspNetCoreVueStarter.dll",

and similar with .vscode/tasks.json:

Before: "${workspaceFolder}/asp-net-core-vue-starter.csproj"

After: "${workspaceFolder}/AspNetCoreVueStarter.csproj"

Otherwise, my local project is the same as the Github-hosted version.

Is there something I'm missing? My preference would be to debug this within Firefox (I've installed the VS Code Debugger for Firefox extension) but even Chrome or Edge would be acceptable at this stage.

Upvotes: 0

Views: 1481

Answers (1)

Jay Borseth
Jay Borseth

Reputation: 2003

I've used this template repository which enables source level debugging for a Quasar app using either VSCode or VS2019. Since Quasar is based on Vue, the steps should be similar.

https://github.com/mhingston/QuasarAspNetCoreTemplate

Note in particular:

  1. For VSCode debugging:

    https://github.com/mhingston/QuasarAspNetCoreTemplate/blob/master/.vscode/launch.json

    There are configurations for Production / Development / chrome for VSCode.

  2. For VS2019 debugging:

    https://github.com/mhingston/QuasarAspNetCoreTemplate/blob/master/Properties/launchSettings.json

  3. Enable Webpack source level maps:

https://github.com/mhingston/QuasarAspNetCoreTemplate/blob/master/ClientApp/quasar.conf.js

build: {
   // this is a configuration passed on
   // to the underlying Webpack
   devtool: 'source-map',

Upvotes: 1

Related Questions