Как отлаживать приложение Angular в VSCode с помощью браузера Edge? - PullRequest
Новая
       50

Как отлаживать приложение Angular в VSCode с помощью браузера Edge?

0 голосов
/ 25 апреля 2018

Я использую Edge extension . Ниже приведена конфигурация в launch.json: 

"configurations": [
    {
      "name": "ng serve",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }]

Вот более подробные шаги согласно документации в VS Code :

  1. npm install -g @ angular / cli, ng new my-app
  2. Установить Удлинитель края
  3. Перезагрузить проект
  4. npm start
  5. Перейдите в представление «Отладка» ( Ctrl + Shift + D ) и нажмите кнопку передач, чтобы создать файл конфигурации отладчика launch.json. Выберите Chrome из выпадающего списка Select Environment. Обновите конфигурации с помощью кода, показанного в файле launch.json выше.
  6. Установить точку останова в app.component.ts
  7. Нажмите F5 - теперь она должна достичь точки останова. Но появляется сообщение о зависании точки останова - «Непроверенная точка останова». Точка останова не получает удар.

Я попытался очистить все точки останова, перезапустить против кода (и компьютера), закрыть все экземпляры браузера, но при этом повторить поведение. Отладчик может запускать угловое приложение в браузере, но не может достичь точек останова.

Итак, есть ли какая-либо другая конфигурация для работы с браузером Edge. Текущая конфигурация отлично работает с браузером Chrome (просто замените edge на chrome в файле launch.json).

Ответы [ 2 ]

0 голосов
/ 18 июля 2018

Эта конфигурация, кажется, работает для меня сейчас. Он прерывает точку останова и показывает ее как доступную. 

 {
        "name": "Edge",
        "type": "edge",
        "request": "launch",
        "url": "http://localhost:4200/#",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "trace": true,
        "userDataDir": "${workspaceRoot}/.vscode/edge"
    }

Полагаю, они исправили некоторые ошибки.

0 голосов
/ 29 июня 2018

Следующие элементы достигают точки останова, но они отображаются как непроверенные в vscode (открытый круг).Я думаю, что это может иметь отношение к встроенным исходным картам. 

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*"
            }
        },
        {
            "name": "debug edge",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*"
            },

        },
        {
            "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}/protractor.conf.js"]
        }
    ]
}
...