Отладка Typescript в VSCode с ASP.Net Керн

в это время я пытаюсь создать веб-приложение React на основе ASP.Net Core (C#). Я написал свой код на машинке. Я связал свой код с Webpack. Карты источников включены.

теперь я хотел бы отладить мой код (Typescript) в коде Visual Studio. Отладка в Chrome работает хорошо. Таким образом, все исходные карты работают правильно.

это возможно? Я нашел много вещей / учебников при работе с узлом.сервера JS, но ничего при работе с ASP.Net Ядро.

Спасибо, что указали мне в правильном направлении. Или даже лучше, написав небольшой учебник о том, как я должен настроить свой VSCode (launch.json и т. д.)

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

3 ответов

Ok после еще 3 часов поиска в интернете следующие проблемы GitHub я нашел решение.

как @ulubeyn упоминал, вам понадобится расширение Debugger for Chrome ссылка на отладчик для Chrome

тогда вы должны добавить конфигурацию в свой launch.json. Что-то вроде этого:--14--> 

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

С ноября прошлого года мы можем запускать несколько отладчиков в VS-коде. Для этого вам нужно добавить "compounds" (источник) к вашим launch.json где вы упоминаете различные имена конфигурации, которые вы хотите начать все вместе.

вот мой окончательный 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"
    }
 ]
}

теперь мы можем отлаживать оба, ASP.NET основное применение и Код на стороне клиента в одном окне кода Visual Studio. The ".NET Core Attach" раздел конфигурации не требуется, но иногда я хочу прикрепить отладчик к запущенному процессу.

23

С помощью launch.json данный VSDekar, я смог отладить код 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}/*"
      }
    }
  ]
}
1

просто используйте возможности многоцелевой отладки Microsoft в VS-коде. https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging

это работает для меня отладки ASP.NET ядро 2.1 + реагировать СПА шаблон.

сначала я запускаю конфигурацию" .NET Core Launch (web)", а затем конфигурацию" Launch Chrome". Я могу поразить точки останова как в коде C#, так и в коде JS.

одно отличие от конфигурации отладки .NET в том, что я изменил опция в 

"launchBrowser": {
        "enabled":

от true до false, потому что Chrome config открывает собственное окно браузера.

Я знаю, что вопрос был для Typescript, но я подозреваю, что это та же процедура.

0