Как начать дебажить rsschool-api

Давайте рассмотрим два варианта.

Вариант с использованием Chrome DevTools

1. Запускаем приложение используя npm start

2. В Google Chrome открываем ссылку chrome://inspect/#devices. Далее в секции Remote Target нажимаем на ссылку inspect

3. В открывшемся окне Chrome DevTools открываем панель “Go to File” ( Command+P или Control+P) и выбираем интересующий нас файл. Так как проект написан на TypeScript, выбираем файл с меткой [sm] (сокращение от Source Map).

4. Ставим брекпоинт

5. В открытом приложении инициируем обращение к rsschool-api. В случае дебага coursesRouter() таб “Courses”.

6. Chrome DevTools перейдет в режим дебага.

Вариант с использованием Visual Studio Code

1. Открываем Visual Studio Code
2. Открываем панель Debug
3. Нажимаем “Редактировать настройки запуска”
4. Добавляем конфигурацию

5. Конфигурация:

{
"type": "node",
"request": "launch",
"name": "Debug RSSchool-API",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"start"
],
"port": 9229
}

6. В нужном файле ставим breakpoint

7. Запускаем дебаг с заданной конфигурацией

8. В открытом приложении инициируем обращение к rsschool-api. В случае дебага coursesRouter() таб “Courses”.

9. Веселого дебага!