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

Question

Как отлаживать приложение Angular в VSCode с помощью браузера Edge? Я пробовал здесь предложения, но ни одна из них не работает.Я должен был прокомментировать последний ответ, но у меня нет 50 репутации, поэтому отвечать на вопрос невежливо, поэтому здесь я задаю другой вопрос.

Два предложения launch.json в приведенном вышетема не работает, равно как и автоматически сгенерированный launch.json из «Debugger for Edge».Я пробовал их отдельно безрезультатно (см. Ниже)

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "edge",
            "request": "launch",
            "name": "Launch Edge against localhost(Debugger for Edge)",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug edge (Answer 1 from topic, I removed the things about Chrome was I wouldn't use that browser)",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*"
            },

        },
        {
            "name": "ng e2e",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
            "protocol": "inspector",
            "args": ["${workspaceFolder}/protractor.conf.js"]
        }
    ]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Edge (Answer 2 from topic)",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "trace": true,
            "userDataDir": "${workspaceRoot}/.vscode/edge"
        }
    ]
}

Браузер запускается и отображается страница (приложение), но точка останова не попадает.В VSCode красная точка меняется на полый кружок.

Вышеупомянутый launch.json должен был находиться в отдельных блоках кода, но редактор не позволил бы мне использовать теги.

Answer 1

Сначала, пожалуйста, проверьте свою версию VSCode, мою версию VSCode, как показано ниже:

И, моя угловая версия: Angular 7.1.4.

Для отладки Angular-кода на стороне клиента сначала нам нужно установить Отладчик для Edge Extension.

В VSCode щелкните меню просмотра и выберите параметры расширения, чтобы проверить,уже установили расширение отладчика для Edge и уже включили его.Затем нажмите «Перезагрузить», чтобы перезапустить VS Code и активировать расширение.

После установки точек останова в классе машинописного текста перейдите в представление «Отладка» идобавьте конфигурацию отладки:

после сохранения изменений и выберите среду отладки, затем вы можете нажать F5 для отладки кода, например:

Ссылка: Использование Angular в коде Visual Studio