Отладка Angular в VS Code

Для отладки кода необходимо расширение VS Code - Debugger for Chrome. Устанавливаем его из маркета. Теперь конфигурируем его:

1.       В Visual studio Code переходим в раздел отладки.
2.       В верхнем левом углу жмем иконку с шестеренкой, тем самым открывая launch.json (этот файл лежит в папке .vscode проекта).

3.       Редактируем содержимое файла следующим образом:

{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "chrome",

            "request": "launch",

            "name": "Launch Chrome against localhost",

            "url": "http://localhost:4200",

            "webRoot": "${workspaceRoot}",

            "sourceMaps": true,

            "trace": true   

        }

    ]

}

В tsconfig.json убедитесь, что "sourceMap": true

4.       Запускаем отладку проекта в Visual studio Code. Например ng serve. При этом, надо помнить, что  Google Chrome стоит браузером по умолчанию, т.к. именно он нужен для отладки.

5.       Выставляем бреакпоинты и жмем F5 – запуск отладки в редакторе. Каждый запуск отладчика запускает закладку Chrome. После завершения сеанса отладки закладка закрывается.

6.       Отлаживаем код, смотрим значение переменных, стек вызовов и проч.

Работа расширения возможна только при включенной генерации map файлов и установленном Google Chrome.