Проблемы с подключением отладчика к Chrome через VSCode

Оффтоп javascript
1

Пытаюсь настроить отладку JavaScript в VSCode через подключение к браузеру, но ничего не получается.

Запускаю Chrome с параметром --remote-debugging-port=8080. Мой проект работает через расширение Live Server на порту 3000: http://localhost:3000/

В VSCode выбираю опцию подключения к Chrome для отладки.

Вот мой файл конфигурации:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Connect to Chrome",
      "port": 8080,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Start Chrome",
      "url": "http://localhost:3000/",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Но отладка не запускается и выдает ошибку:

Не удается подключиться к цели на localhost:8080: Невозможно установить соединение с целью отладки на http://localhost:8080: Отладочные цели не найдены

В чем может быть проблема? Помогите разобраться.

2

А ты точно Chrome с нужными флагами запускаешь? Попробуй --remote-debugging-port=9222 вместо 8080, этот порт чаще используется. И еще добавь --user-data-dir=/tmp/chrome-debug, чтобы избежать конфликтов с уже открытым браузером. Какую версию VSCode используешь?

3

Проблема скорее всего в том, что у тебя две конфигурации, и ты пытаешься подключиться к Chrome, который запущен не из VSCode. Попробуй использовать вторую конфигурацию “Start Chrome” - она сама запустит браузер с нужными параметрами и подключится к нему. Первая нужна только если хочешь подключиться к уже запущенному процессу Chrome.

4

у меня была похожая беда недавно! оказалось что Live Server как-то мешался с подключением к отладчику. попробуй сначала просто открыть свой html файл напрямую в хроме (через file://) и подключится к нему, а не через localhost:3000. еще может помочь если полностью закрыть все окна хрома перед запуском с флагами отладки - иначе он не всегда подхватывает параметры командной строки правильно.