[英]Debug Typescript in VSCode with ASP.Net Core
目前,我正在尝试基于ASP.Net Core(C#)创建一个React Web应用程序。 我用TypeScript编写了代码。 我将代码与Webpack捆绑在一起。 源映射已启用。
现在,我想在Visual Studio Code中调试我的(Typescript)代码。 在Chrome中进行调试的效果很好。 因此,源映射都正常工作。
这可能吗? 使用Node.js服务器时,我发现了很多东西/教程,但是使用ASP.Net Core时,却没有发现任何东西/教程。
感谢您为我指明正确的方向。 甚至更好,为我如何设置VSCode编写一些教程( launch.json
等)
在经过3个小时的网络搜索后,可以按照GitHub问题我找到了解决方案。
如@ulubeyn所述,您将需要Debugger for Chrome
扩展Debugger for Chrome
链接到Chrome调试器
然后,您必须在launch.json
添加配置。 像这样:
{
"name": "Launch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:5000",
"webRoot": "${workspaceRoot}/wwwroot"
}
从去年11月开始,我们就可以在VS Code中启动多个调试器。 为此,您必须在launch.json
中添加一个"compounds"
(源)部分,在其中提及要一起开始的不同配置名称。
这是我最后的launch.json
。 请注意,我已经在".NET Core Launch (web)"
配置中将"launchBrowser"
"enabled"
属性设置为false
,以防止此配置打开新的浏览器选项卡,因为我们打开了一个新的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 Core应用程序和客户端代码。 不需要".NET Core Attach"
配置部分,但是有时我想将调试器附加到正在运行的进程上。
使用launch.json
提供的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}/*"
}
}
]
}
只需在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配置会打开自己的浏览器窗口。
我知道问题出在打字稿,但我怀疑这是相同的过程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.