Fatal编程技术网
  • debugging/
  • Debugging 使用ASP.Net内核在VSCode中调试Typescript

Debugging 使用ASP.Net内核在VSCode中调试Typescript

debugging typescript webpack asp.net-core visual-studio-code

Debugging 使用ASP.Net内核在VSCode中调试Typescript,debugging,typescript,webpack,asp.net-core,visual-studio-code,Debugging,Typescript,Webpack,Asp.net Core,Visual Studio Code,目前，我正在尝试创建一个基于ASP.NETCore（C#）的React Web应用程序。我用打字脚本写代码。我把我的代码和网页包捆绑在一起。已启用源映射 现在，我想在VisualStudio代码中调试我的（Typescript）代码。在Chrome中调试效果很好。因此，源映射都正常工作 这可能吗？在使用Node.js服务器时，我发现了很多东西/教程，但在使用ASP.Net Core时却什么都没有 谢谢你给我指出了正确的方向。或者更好，写一篇关于如何设置VSCode的小教程（launch.json

目前，我正在尝试创建一个基于ASP.NETCore（C#）的React Web应用程序。我用打字脚本写代码。我把我的代码和网页包捆绑在一起。已启用源映射

现在，我想在VisualStudio代码中调试我的（Typescript）代码。在Chrome中调试效果很好。因此，源映射都正常工作

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

谢谢你给我指出了正确的方向。或者更好，写一篇关于如何设置VSCode的小教程（
launch.json
etc）

好的，再搜索3个小时后，我发现了一个解决方案

正如@ulubeyn提到的，您需要Chrome的扩展
调试器

然后您必须在
launch.json
中添加一个配置。大概是这样的：


{
    "name": "Launch Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:5000",
    "webRoot": "${workspaceRoot}/wwwroot"
}


自去年11月以来，我们能够在VS代码中启动多个调试器。为此，您必须在
launch.json
中添加一个
“components”
部分，在该部分中，您要同时提到不同的配置名称

这是我最后的
launch.json
。请注意，我已在
“.NET Core Launch（web）”
配置中将
“launchBrowser”
“enabled”
属性设置为
false
，以防止此配置打开新的浏览器选项卡，因为我们打开了一个带有
“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”
配置部分是不需要的，但有时我想在正在运行的进程上附加调试器。
好的，再搜索3个小时后，关注GitHub问题，我找到了解决方案

正如@ulubeyn提到的，您需要Chrome的扩展
调试器

然后您必须在
launch.json
中添加一个配置。大概是这样的：


{
    "name": "Launch Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:5000",
    "webRoot": "${workspaceRoot}/wwwroot"
}


自去年11月以来，我们能够在VS代码中启动多个调试器。为此，您必须在
launch.json
中添加一个
“components”
部分，在该部分中，您要同时提到不同的配置名称

这是我最后的
launch.json
。请注意，我已在
“.NET Core Launch（web）”
配置中将
“launchBrowser”
“enabled”
属性设置为
false
，以防止此配置打开新的浏览器选项卡，因为我们打开了一个带有
“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”
配置部分是不需要的，但有时我想在正在运行的进程上附加调试器。
使用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}/*"
      }
    }
  ]
}



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



只需在VS代码中使用Microsoft的多目标调试功能即可

我可以调试ASP.NET Core 2.1+React SPA模板

我首先启动“.NETCoreLaunch（web）”配置，然后启动“LaunchChrome”配置。
我可以在C代码和JS代码中找到断点

与stock.Net调试配置的一个不同之处是，我在中更改了选项


"launchBrowser": {
        "enabled":


从true到false，因为Chrome配置会打开自己的浏览器窗口


我知道问题是针对Typescript的，但我怀疑这是相同的过程。
只需在VS代码中使用Microsoft的多目标调试功能即可

我可以调试ASP.NET Core 2.1+React SPA模板

我首先启动“.NETCoreLaunch（web）”配置，然后启动“LaunchChrome”配置。
我可以在C代码和JS代码中找到断点

与stock.Net调试配置的一个不同之处是，我在中更改了选项


"launchBrowser": {
        "enabled":


从true到false，因为Chrome配置会打开自己的浏览器窗口


我知道这个问题是针对Typescript的，但我怀疑这是同一个过程。
看看看看看看它对你有用吗？我也这么做了，但是在VS代码中断点仍然处于禁用状态。设置正确的webroot（为我解决了问题）2。任务在组合中同时运行-因此，当后端构建启动时，浏览器将打开（我们需要等待构建并重新启动浏览器）。3.这是一个很糟糕的问题，重新启动有帮助（有时）。这太棒了。。。无论禁用了多少VS功能，通过VS2017进行调试每一步大约需要7秒。使用可视化代码配置，单步执行是即时的，我在控制器中同时执行typescript/javascript代码和C#代码。是的，我复制了启动文件，但重新启动后断点仍然变灰。chrome works中的调试。我可以看一下文件结构设置吗？Idk将调试与VisualStudio代码连接起来。但是我不能让它工作。所以我让它工作的唯一方法是启动第一个配置.Net核心启动（web），然后手动启动启动Chrome。我认为这对我来说是两全其美的，因为它们都在launch.json中。我仍在了解这里到底发生了什么。这对你有用吗？我也这么做了，但是在VS代码中断点仍然处于禁用状态