使用ASP.Net Core在VSCode中調試打字稿

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所述，您將需要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"配置部分，但是有時我想將調試器附加到正在運行的進程上。

Answer 2

使用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}/*"
      }
    }
  ]
}

Answer 3

只需在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配置會打開自己的瀏覽器窗口。

我知道問題出在打字稿，但我懷疑這是相同的過程。