如何从 VS Code 调试 ASP.NET Core 和 Vue.js？

Question

我正在尝试从 VS Code 中调试 ASP.​NET Core + Vue.js 项目，以利用可用的调试器工具。

我可以使用 F5 在 VS Code 中运行项目，但是断点显示为空心，并带有注释“没有为此文档加载任何符号”。在 VS Code 中运行时，调试控制台会输出已为项目 dll 加载的符号：Loaded 'C:\Projects\SoftwareAteliers-1.1.0\bin\Debug\netcoreapp2.2\AspNetCoreVueStarter.dll'. Symbols loaded.

启动过程的其余部分按预期工作，启动浏览器并加载 Vue.js 应用程序。

可以在 here 找到该项目的 Github 存储库（请注意，由于需要 ASP.NET Core 2.2，我没有使用最新版本的存储库）。

我不得不修改 .vscode/launch.json，因为 repo 没有引用正确的 .csproj 文件。

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

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

和.vscode/tasks.json类似：

之前： "${workspaceFolder}/asp-net-core-vue-starter.csproj"

之后： "${workspaceFolder}/AspNetCoreVueStarter.csproj"

否则，我的本地项目与 Github 托管的版本相同。

我有什么遗漏吗？我的偏好是在 Firefox 中进行调试（我已经为 Firefox 扩展安装了 VS Code Debugger），但在这个阶段即使是 Chrome 或 Edge 也是可以接受的。

Answer 1

我使用了这个模板存储库，它可以使用 VSCode 或 VS2019 对 Quasar 应用程序进行源代码级调试。由于 Quasar 是基于 Vue 的，所以步骤应该类似。

https://github.com/mhingston/QuasarAspNetCoreTemplate

特别注意：

1. 对于 VSCode 调试：

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

   VSCode 有 Production / Development / chrome 的配置。

2. VS2019调试：

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

3. 启用 Webpack 源级映射：

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