此时我正在尝试创建基于ASP.Net Core(C#)的React Web应用程序。我在TypeScript中编写了代码。我将我的代码与Webpack捆绑在一起。源地图已启用。
现在我想在Visual Studio Code中调试我的(Typescript)代码。 Chrome中的调试效果很好。所以源地图都正常工作。
这可能吗?我在使用Node.js服务器时发现了很多东西/教程,但在使用ASP.Net Core时却没有。
感谢您指出我正确的方向。或者甚至更好,编写一个关于如何设置我的VSCode(launch.json
等)的小教程
答案 0 :(得分:28)
好了又经过3个小时的网络搜索后,跟随GitHub问题找到了解决方案。
如@ulubeyn所述,您需要扩展程序Debugger for Chrome
Link to Debugger for Chrome
然后您必须在launch.json
中添加配置。像这样:
{
"name": "Launch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:5000",
"webRoot": "${workspaceRoot}/wwwroot"
}
自去年11月以来,我们可以在VS Code中启动多个调试器。为此,您必须在"compounds"
添加launch.json
(source)部分,其中提到了您想要一起开始的不同配置名称。
这是我的最终launch.json
。请注意,我已在"launchBrowser"
配置中将"enabled"
false
属性设置为".NET Core Launch (web)"
,以防止此配置打开新的浏览器选项卡,因为我们打开了一个新的Broser调试器附加在"Launch Chrome"
配置中。
{
"version": "0.2.0",
"compounds": [
{
"name": "ASP.Net Core & Browser",
"configurations": [".NET Core Launch (web)", "Launch Chrome"]
}
],
"configurations": [
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach",
"processId": "${command:pickProcess}"
},
{
"name": ".NET Core Launch (web)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/VoteExample.dll",
"args": [],
"cwd": "${workspaceRoot}",
"stopAtEntry": false,
"launchBrowser": {
"enabled": false,
"args": "${auto-detect-url}",
"windows": {
"command": "cmd.exe",
"args": "/C start ${auto-detect-url}"
},
"osx": {
"command": "open"
},
"linux": {
"command": "xdg-open"
}
},
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceRoot}/Views"
}
},
{
"name": "Launch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:5000",
"webRoot": "${workspaceRoot}/wwwroot"
}
]
}
现在我们可以在一个Visual Studio代码窗口中调试ASP.NET核心应用程序和客户端代码。不需要".NET Core Attach"
配置部分,但有时我想在正在运行的进程上附加调试器。
答案 1 :(得分:4)
使用VSDekar提供的launch.json
,我可以调试C#代码,但不能调试TypeScript。我还需要设置sourceMapPathOverrides
属性以调试TypeScript。这是我的launch.json
:
{
"version": "0.2.0",
"compounds": [
{
"name": "Full stack",
"configurations": [".NET Core Launch (console)", "Launch Chrome"]
}
],
"configurations": [
{
"name": ".NET Core Launch (console)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceFolder}/bin/Debug/netcoreapp2.1/ExpenseMgmt.dll",
"args": [],
"cwd": "${workspaceFolder}",
"stopAtEntry": false,
"console": "internalConsole"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:5000",
"webRoot": "${workspaceFolder}/wwwroot",
"breakOnLoad": true,
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:\\*": "${workspaceFolder}/*"
}
}
]
}
答案 2 :(得分:0)
只需在VS Code中使用Microsoft的多目标调试功能即可。 https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging
它适用于调试ASP.NET Core 2.1 + React SPA模板。
我首先启动“ .NET Core Launch(web)”配置,然后启动“启动Chrome”配置。 我可以在C#代码和JS代码中都达到断点。
与标准.Net调试配置的不同之处在于,我已更改
中的选项"launchBrowser": {
"enabled":
从true到false,因为Chrome配置会打开自己的浏览器窗口。
我知道问题出在打字稿,但我怀疑这是相同的过程。