Отладка с кодом Visual Studio не работает

я наконец-то полностью рабочая !!!

для тех, кто заинтересован :

(С помощью chromium-browser на Linux, но вы можете легко просто заменить на "chrome").

во-первых, вот запуск.в JSON config:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

Я решил удалить часть с "request": "launch", так как мне нужно запустить новое окно браузера.

затем запустите браузер следующим образом:
chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

в новом окне, доступ к http://localhost:4200.

затем из VSC запустите отладку.

все должно работать нормально, и вы должны иметь возможность использовать точки останова:)

GIF доступен здесь, чтобы увидеть его в действии:http://hpics.li/0156b80

похожие на Аарон Ф. Анс Я использую следующую настройку для Angular 2+ develop в среде Windows

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "trace": true,
            "smartStep": true,
            "runtimeArgs": [
              "--disable-session-crashed-bubble",
              "--disable-infobars"
            ],
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

Я использую Angular CLI 1.7.3 и Angular: 5.2.9 на Mac OSX. Вот конфигурация, которая работает для меня:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Client in Chrome",
            "sourceMaps": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*",
            }
        }
    ]
}

следующая конфигурация хорошо работает для меня на macOS с помощью VSCode v1.23, угловой 6 и хром 66.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "smartStep": true,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

у меня проблема с запуском.json предоставлено Аароном Ф.

".скрипты " в командной строке отладчика дают такие URL-адреса:

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts)

so VS Code пытается использовать файл " / home/user/my-dream-app/src/app/webpack:/src/app / app.деталь.ts " (Примечание webpack: в середине).

исходные карты не работают, потому что мой Chrome дает url как "webpack: /" с одной косой чертой.

In заставил его работать с этим запуском.в JSON:

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome with ng serve",
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
        }
      ]
}

и получил правильное отображение

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)

• Ubuntu: 16.04
• Chrome: 64.0.3282.186
• VSCode: 1.20.1
• угловой CLI: 1.7.2
• узел: 7.10.1