Отладка React в VSCode

Добро пожаловать во вторую статью об отладке, если вы испытываете трудности с отладкой, то вы попали по адресу 😉.

📚 Минута теории.

Существует 2 основных типа отладки:

Присоединение (означает, что вы присоединяетесь к уже запущенному процессу)
Launch — означает, что вы запускаете новый процесс и присоединяетесь к нему. Это может быть headless chrome или что-либо еще).

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

1) Добавьте объект конфигурации в массив конфигураций в .vscode/launch.json в корне проекта.

{
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8080", // localhost where we will launch our front-end
      "webRoot": "${workspaceFolder}"
    },
  ]
}

Войти в полноэкранный режим Выход из полноэкранного режима

💡 Совет: Вы можете сгенерировать тот же код, нажав кнопку «Добавить конфигурацию» в правом нижнем углу VSCode.

После нажатия кнопки появится контекстное меню, в котором нужно выбрать запуск Chrome.

И вот, готово! Вы получите тот же конфиг, что и в шаге №1 😎