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

Question

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

我可以在 VS Code 中使用 F5 运行项目，但断点显示为空心并带有注释 "No symbols have been loaded for this document"。在 VS Code 中运行ning 时，调试控制台会输出已为项目 dll 加载的符号：Loaded 'C:\Projects\SoftwareAteliers-1.1.0\bin\Debug\netcoreapp2.2\AspNetCoreVueStarter.dll'. Symbols loaded.

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

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

我不得不修改 .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-hosted 版本相同。

有什么我想念的吗？我的偏好是在 Firefox 中调试它（我已经为 Firefox 扩展安装了 VS 代码调试器），但在这个阶段甚至 Chrome 或 Edge 也是可以接受的。

Answer 1

我使用了这个模板存储库，它可以使用 VSCode 或 VS2019 为 Quasar 应用程序启用源代码级调试。由于Quasar是基于Vue的，所以步骤应该差不多。

https://github.com/mhingston/QuasarAspNetCoreTemplate

特别注意：

对于VSCode调试：

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

有用于生产/开发的配置/chrome VSCode。
VS2019调试：

https://github.com/mhingston/QuasarAspNetCoreTemplate/blob/master/Properties/launchSettings.json
启用 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',

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

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

asp.net

vue.js

visual-studio-code

asp.net-core

vscode-debugger