Отладка Angular (ng test) — код VS не останавливается на точках останова

В настоящее время у меня проблема. Я начал писать тесты для своего приложения Angular и хотел их отлаживать. Теперь я много гуглил, пробовал рецепты от Microsoft (https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI), и ближе всего к тому, чтобы заставить его работать, был этот BlogPost

http://blog.mlewandowski.com/Debugging-Karma-tests-with-VSCode.html

Теперь, по крайней мере, я могу подключить отладчик к VS-Code. Однако VS Code по-прежнему не останавливается на точках останова, а тесты просто продолжают выполняться. Точки останова в VS Code также останутся непроверенными (см. изображение)

Это то, что у меня есть до сих пор (я поставляю только те части, которые я изменил, чтобы не публиковать слишком много кода).

Любые идеи, что я делаю неправильно? Кроме того, отладка работает просто отлично. Я могу отлаживать свои приложения node.js, и отладка ng serve также работает нормально.

launch.json

{
    "type": "chrome",
    "request": "attach",
    "name": "MyApp - Tests",
    "address": "localhost",
    "port": 9222,
    "pathMapping": {
        "/": "${workspaceRoot}",
        "/base/": "${workspaceRoot}"
    }
}

karma.conf.js

browsers: [
    'ChromeDebugging'
],

customLaunchers: {
    ChromeDebugging: {
        base: 'Chrome',
        flags: ['--remote-debugging-port=9222']
    }
}

relief.melone 13.12.2018 источник

comment

Возможный дубликат Angular CLI 1.7.0 и Visual Studio Code — нельзя устанавливать точки останова - Liebster Kamerad 26.02.2019

Ответы (4)

arrow_upward
2
arrow_downward

Установили ли вы расширение «Отладчик для Chrome».

Посмотрите на это руководство. https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

ОБНОВЛЕНИЕ: это мой launch.json. Может быть, вы можете попробовать.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
    }
  ]
}

Карма конф

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

Tan 13.12.2018

comment

Смотрите мою первую ссылку ;) Я тоже пробовал. Но это совсем не сработало. Я даже не мог подключиться к браузеру с таким подходом. Отладчик для Chrome установлен. Я использую его для отладки ng serve. Вот работает нормально - relief.melone; 13.12.2018

comment

@relief.melone вы пытались запустить ng serve и не останавливайте его, пусть он работает. ЗАТЕМ запустите отладчик - Tan; 13.12.2018

comment

Ага. Пробовал. К сожалению, не повезло. Я заметил, что способ, описанный в рецептах vscode, подключается, но он по-прежнему показывает то же поведение, что и команда attach. Итак, тесты идут. Но VS Code не останавливается на точках останова и перечисляет их как непроверенные. - relief.melone; 13.12.2018

comment

@relief.melone из любопытства, это было из-за того, что ваше приложение находилось в подпапке вашего репозитория? В моем случае мне пришлось изменить значение webRoot в файле launch.json. А именно: "webRoot": "${workspaceFolder}/client". Мое приложение находится в папке client. - Diego Rodriguez; 21.01.2021

arrow_upward
0
arrow_downward

Попробуйте эту конфигурацию, она подключается к запущенному процессу ng test с портом, определенным в вашем karma.conf. Если в вашем karma.conf определено несколько браузеров, возможно, вам придется запустить ng test с ng test --browser=ChromeDebugging

{
        "name": "ng test",
        "type": "chrome",
        "request": "attach",
        "address": "localhost",
        "port": 9222,
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "sourceMapPathOverrides": {
            "/./*": "${webRoot}/*",
            "/src/*": "${webRoot}/*",
            "/*": "*",
            "/./~/*": "${webRoot}/node_modules/*"
        }
}

xan2063 07.02.2019

arrow_upward
0
arrow_downward

Недавно возникла эта проблема в VSCode и Intellij, она связана с генерацией исходной карты в Webpack, которую Angular CLi использует под капотом. Я исправил проблему, установив evalSourceMap: "false" в angular.json, см. полный ответ здесь https://stackoverflow.com/a/54883663/706012.

Liebster Kamerad 26.02.2019

arrow_upward
0
arrow_downward

Добавьте 'pathMapping' в файл launch.json, как показано ниже:

{
        "name": "ng test",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:9876/debug.html",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "pathMapping": {
            "/_karma_webpack_": "${workspaceFolder}"
        },
        "sourceMapPathOverrides": {
            "webpack:/*": "${webRoot}/*",
            "/./*": "${webRoot}/*",
            "/src/*": "${webRoot}/*",
            "/*": "*",
            "/./~/*": "${webRoot}/node_modules/*"
        }
    }

wu didi 15.04.2021

Отладка Angular (ng test) — код VS не останавливается на точках останова

Ответы (4)

Вопросы по теме