使用ASP.Net Core在VSCode中调试Typescript

Question

这时我正在尝试创建一个基于ASP.Net Core(C#)的React Web应用程序.我在TypeScript中编写了代码.我将我的代码与Webpack捆绑在一起.源地图已启用.

现在我想在Visual Studio Code中调试我的(Typescript)代码.Chrome中的调试效果很好.所以源地图都正常工作.

这可能吗？我在使用Node.js服务器时发现了很多东西/教程,但在使用ASP.Net Core时却没有.

谢谢你指点我正确的方向.或者甚至更好,编写一个小教程,我将如何设置我的VSCode(launch.json等)

Answer 1

好了又过了3个小时在网上搜索了一个关注GitHub问题我找到了解决方案.

正如@ulubeyn所提到的,你需要为Chrome调试器的扩展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.

这是我的决赛launch.json.请注意我已在配置中将"launchBrowser" "enabled"属性设置为阻止此配置打开新的浏览器选项卡,因为我们打开了一个新的Broser,并在配置中附加了调试器.false".NET Core Launch (web)""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"不需要配置部分,但有时我想调试器附加上正在运行的进程.

Answer 2

使用launch.jsonVSDekar提供的代码，我可以调试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}/*"
      }
    }
  ]
}