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

Ответ 1

Я смог решить эту проблему на OSX. Причина, по которой возникает такая боль, связана с несколькими причинами проблемы.

• Сначала вы нажимаете --user-data-dir=remote-profile: если вы уже используете Chrome (например, у вас уже есть вкладки, а кто нет?), вам нужно использовать другой userDataDir, чтобы запустить Chrome независимый экземпляр.
  Правильный способ сделать это, однако, состоит в том, чтобы добавить "userDataDir": "${workspaceRoot}/.vscode/chrome", в вашу конфигурацию launch.json(см. ниже). Это должен быть путь. Если используется" удаленный профиль ", он пытается найти относительный каталог с именем" remote-profile".
• Вам нужно установить sourceMapPathOverrides в конфигурацию launch.json, значение которой зависит от вашей ОС:
  OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
  Windows: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }
  Linux: "sourceMapPathOverrides": { "webpack:///*": "/*" }
  (Примечание: я не тестировал версии для Windows или Linux)

Вот мой рабочий launch.json на OSX:

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",

    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            // This forces chrome to run a brand new instance, allowing existing
            // chrome windows to stay open.
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            //"diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        }
    ]
}

Для этого запустите ng serve в терминале, а затем нажмите F5 внутри кода Visual Studio.

Вот версии, с которыми я работаю:

• angular -cli: 1.0.0-beta.24
• node: 7.3.0
• Chrome: 55.0.2883.95
• Код Visual Studio: 1.8.1
• Расширение VSCode "Отладчик для Chrome" msjsdiag.debugger-for-chrome: 2.4.2

Ответ 2

Я, наконец, полностью его работаю.

Для желающих:

(используя хром-браузер в Linux, но вы легко можете просто заменить его на "хром" ).

Во-первых, здесь launch.json:

{
    "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:///*": "/*"
            }
        }
    ]
}

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

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

В новом окне выберите http://localhost:4200.

Затем из VSC запустите debug.

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

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

Ответ 3

Подобно Aaron F. ans Я использую следующий параметр для Angular 2+ разработки в среде 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}/*"
            }
        }
    ]
}

Ответ 4

Я использую 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/*",
            }
        }
    ]
}

Ответ 5

Следующая конфигурация хорошо работает для меня на MacOS с использованием VSCode v1.23, Angular 6 и Chrome 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/*"
      }
    }
  ]
}

Ответ 6

У меня была та же проблема с использованием windows-vscode и мой launch.json выглядит следующим образом:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
        }
        ]
}

Затем я установил расширение отладки Chrome отсюда, а затем ошибка устранена.

Вы можете напрямую установить это расширение из:

vscode-->Extensions-->search and select "Debugger From Chrome"-->click on install 

Возможно, вам придется перезапустить vscode.

Ответ 7

Я получил странную проблему с launch.json, предоставленной Аароном Ф.

".scripts" в командной строке отладчика дает 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)

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

Исходные карты не работают, потому что мой Chrome дает URL-адрес в виде "webpack:/" с ОДНОЙ косой чертой.

В получил это работает с этим launch.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

Ответ 8

Вам просто нужно установить расширение Debugger for Chrome.

Ответ 9

To test and debug in vs code with angular and karma here is a solution,
    angular test case to work you have to make a setting in 2 files,


 1. Karm.conf.json ( this is a file that set your karma test runner.
 2. LaunchSetting.json ( this is file used by your Chome Debugger extension in vs code)


    So always first you have to run your karma test runner, on that port and then you can attach debugger on running port.

    Step 1) Setup Karma.conf.json,
    open default file created by cli,
    you got something like this,
         port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],

    if you run ng test, you see in console you got some info like is Chrome is running, as well a page will open in browser with http://localhost:9876,

    Now time to add headlesschrome with port 9222,

    inside config.set, add this,

        customLaunchers:{
              ChromeHeadless:{
                base:'Chrome',
                flags:[
                  '--headless',
                  '--disable-gpu',
                  '--no-sandbox',
                 // Without a remote debugging port, Google Chrome exits immediately.
                  '--remote-debugging-port=9222',
                ]
              }
            }

    and now go and add to the browser array ChoromeHeadless, so updated array will look like this, browsers: ['Chrome','ChromeHeadless'],

    now run ng test you got in console chrome and chrome headless both running,

 Step 2)   Time to set up your launcher, to debug on 9222, debug to work you need sourcmap creation to work properly, that is important,
so for same to work just copy-paste config setting from below configuration array to your launchsetting.json configuration array as new config,




    configurations: [
        {
                    "name": "Attach to Chrome, with sourcemaps",
                    "type": "chrome",
                    "request": "attach",
                    "port": 9222,
                    "webRoot": "${workspaceFolder}",
                    "sourceMapPathOverrides": {
                        "*": "${webRoot}/*",
                    },
                    "sourceMaps": true,
        }
        ]

    run ng test, and then go to debugger choose the config we add, your debugger working,

if you using npm run test, then make sure in your package.config where you define a run test, you have not set source map to false, if not then you can set debugger with,
npm run test as well.