Не удается отладить в VSCode, подключив Chrome

У меня есть настройка по умолчанию в launch.json, сайт работает на порту 8080

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Однако, когда я нажимаю кнопку "Отладка", я получаю эту ошибку:

Невозможно подключиться к цели: подключите ECONNREFUSED 127.0.0.1:9222

Вопрос 1: почему VSCode назначает порт 9222 при создании этого json

Что такого особенного в этом порту, что MS решила поместить его в этот launch.json?

Вопрос 2: Что мне нужно изменить, чтобы все работало.

Отладка запуска запускает новое окно. Я спрашиваю конкретно об опции отладки Attach, так что она будет открываться на новой вкладке.

Благодарю.

Ответ 1

Для этого вам нужно установить Debugger для расширения Chrome. Откройте расширения в коде VS и найдите отладчик для Chrome.
Вам нужно запустить веб-сервер по URL-адресу, указанному в первой конфигурации (по умолчанию : http://localhost: 8080). Я использую serve НПМ пакет, который я установил во всем мире. Из моей папки приложения я запускаю serve -p 8080
Выберите "Запустить Chrome" с опцией localhost. Он запустит браузер, и вы можете установить контрольные точки в своем коде, и отладка должна работать.

Что касается второй конфигурации (Прикрепить к Chrome). В порту ничего особенного. Чтобы подключиться к Chrome, вам необходимо запустить Chrome с удаленной отладкой на порту, указанном в конфиге. Например, chrome.exe --remote-debugging-port=9222. Я лично никогда не использую эти варианты. Просто выполните три шага выше, и все должно быть в порядке.

Ответ 2

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

Используйте конфигурацию urlFilter, в которой могут быть символы подстановки, такие как *, чтобы присоединить отладчик к любому суб-маршруту в вашем URL.

например "urlFilter": "http://localhost:4200/*"

Полный список шагов, которые необходимо предпринять:

настройте файл lanch.json так, чтобы он выглядел примерно так:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "urlFilter": "http://localhost:4200/*",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Закройте все открытые экземпляры Chrome (убедитесь, что все они уничтожены с помощью диспетчера задач в Windows).
Обед chrome со следующим параметром: --remote-debugging-port = 9222

убедитесь, что порт в этом параметре совпадает с портом, настроенным в свойстве 'port' атташе к конфигурации chrome в файле lunch.json (как в примере выше)
Перейдите на свой сайт. В этом примере http://localhost:4200
Запустите "Начать отладку" в vscode.

Ответ 3

Я сталкивался с этим вопросом, когда искал помощи при использовании конфигурации "Присоединение к Chrome" в VSCode. В то время как принятый ответ дал мне несколько советов, я должен был еще немного покопаться. Вот шаги, которые спомогли мне, если кто-то еще сочтет их полезными:

Установите расширение отладчика для Chrome в VSCode
Служите вашим файлам на веб-сервере по вашему выбору
Запустить Chrome с включенной удаленной отладкой
В этом новом окне Chrome перейдите по URL-адресу, на котором размещен ваш веб-сервер (http://localhost:8080, например).

В VSCode добавьте в файл launch.json конфигурацию, которая выглядит следующим образом:

"configurations": [
  {
    "type": "chrome",
    "request": "attach",
    "port": 9222,
    "name": "Attach Chrome",
    "url": "http://localhost:8080/",
    "webRoot": "${workspaceFolder}"
  }
]

Нажмите кнопку воспроизведения в VSCode с опцией "Присоединить к Chrome", выбранной из выпадающего меню.

Ключевым моментом, необходимым в файле конфигурации, является поле url. Это должен быть URL-адрес, на котором размещаются ваши файлы, и этот URL-адрес должен быть в данный момент открыт в окне Chrome, которое вы только что запустили с включенной удаленной отладкой. Если вы введете все остальное правильно, кроме этого поля, VSCode выдаст вам сообщение об ошибке, в котором указано, какие URL доступны. Что-то вроде Cannot connect to runtime process, timeout after 10000 ms - (reason: Can't find a valid target that matches: localhost:8080/. Available pages: ["http://localhost:8080",...

Для полноты, вот как вы запускаете Chrome с включенной удаленной отладкой (из отладчика для Chrome README):

Windows:

Щелкните правой кнопкой мыши ярлык Chrome и выберите свойства
В поле "target" добавьте --remote-debugging-port=9222
Или в командной строке выполните <path to chrome>/chrome.exe --remote-debugging-port=9222

MacOS:

В терминале выполните /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux:

В терминале запустите google-chrome --remote-debugging-port=9222

Ответ 4

Заглянуть в диспетчер задач. Там могут висеть экземпляры Chrome. Только убив их, вы сможете запустить пульт и успешно запустить отладчик. Работал на меня.

Ответ 5

Я вложу свои жалкие два цента :), к сожалению или к счастью, у меня была похожая проблема, и вышеупомянутый пост указал мне верное направление, и я кое-что узнал по пути. Пожалуйста, смотрите мои заметки ниже:

1) Если вы работаете в Linux, после запуска vsCode выполните следующую команду Linux:

sudo lsof -i -P -n | grep LISTEN

это позволит вам увидеть, какие порты используются, в моем случае вы можете увидеть код на 5500.

2) Если у вас есть тестовый html/js-код, а в vsCode установлены сервер и отладчик, то следующие файлы должны быть настроены следующим образом:

Файл рабочей области кода:

/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
*/

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "liveServer.settings.AdvanceCustomBrowserCmdLine": "google-chrome-stable --remote-debugging-port=9222",
    }
}

launch.json:

{
/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
*/
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch 127.0.0.1:5500",
            "type": "chrome",
            "request": "launch",
            "url": "http://127.0.0.1:5500/${relativeFileDirname}/${fileBasename}",
            "webRoot": "${workspaceFolder}/${relativeFileDirname}"
        },
        {
            "name": "Attach 127.0.0.1:5500",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://127.0.0.1:5500/${relativeFileDirname}/${fileBasename}",
            "webRoot": "${workspaceFolder}/${relativeFileDirname}/"
        },
    ]
  }

setting.json:

/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
    */

    {
        "cSpell.language": "en",
        "git.enableSmartCommit": true,
        "git.autofetch": true,
        "[html]": {
            "editor.defaultFormatter": "vscode.html-language-features"
        },
        "liveServer.settings.donotShowInfoMsg": true,
        "cSpell.userWords": [
            "lsof",
            "readonly"
        ],
        "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "cSpell.enabledLanguageIds": [
            "asciidoc",
            "c",
            "cpp",
            "csharp",
            "css",
            "git-commit",
            "go",
            "handlebars",
            "haskell",
            "html",
            "jade",
            "java",
            "javascript",
            "javascriptreact",
            "json",
            "jsonc",
            "latex",
            "less",
            "markdown",
            "php",
            "plaintext",
            "pug",
            "python",
            "restructuredtext",
            "rust",
            "scala",
            "scss",
            "text",
            "typescript",
            "typescriptreact",
            "yaml",
            "yml"
        ],
    }

3) ПРИМЕЧАНИЕ. Перед запуском "Live Server" убедитесь, что все браузеры закрыты. Раскрутите ваш сервер "Live Server", чтобы открыть файл, который вы хотите отладить, согласно конфигурации для браузер chrome, указанный в файле vsCode> "Настройки"> "Настройки", ПРИМЕЧАНИЕ используйте 127.0.0.1. Мне не повезло с localhost, порт по умолчанию - 5500. Браузер теперь запускается согласно файлу vsCode-workspace установка "liveServer.settings.AdvanceCustomBrowserCmdLine": "google-chrome-stable --remote-debugging-port = 9222", именно здесь происходит волшебство отладки. ПРИМЕЧАНИЕ. Перед запуском "Живого сервера" убедитесь, что все браузеры закрыты. Особенно убедитесь, что нет никаких расширений Chrome, таких как Hangouts, это также предотвратит открытие Chrome порта 9222, Мне пришлось выбрать опцию "Выход" в задаче, чтобы убить все расширения Chrome в моем примере:

4) Теперь, если вы запустите sudo lsof -i -P -n | grep LISTEN, вы увидите vsCode 'Live Server', работающий на порту 127.0.0.1:5500, и отладчик сделает свое дело на порту 127.0.0.1:9222; Если вы не видите, что оба порта открыты, значит что-то не так, и вам нужно будет подтвердить ШАГ 3), указанный выше.

5) Вы можете проверить веб-интерфейс для отладчика, введя http://127.0.0.1:9222/ в пустой вкладке браузера, этот URL будет отображать ссылки на каждую вкладку и открытые расширения и позволит вам возиться с отладчиком, нажмите на ссылку на файл вы хотите отладить, в моем случае 127.0.0.1:5500/Leason_66/index.html, это порт и ссылка, с которой vsCode будет связываться и повторно визуализировать в отладчике IDE.

6) Примечание. Убедитесь, что вы находитесь в файле, который хотите отладить. Мы почти на месте, теперь просто нажмите на значок отладки, затем перейдите к ЗЕЛЕНОЙ кнопке воспроизведения и выберите вариант вложения из раскрывающегося списка. обратите внимание, что информация, указанная в файле launch.js, будет отображаться в раскрывающемся списке.

7) Время для некоторых действий! Теперь все, что вам нужно сделать, это нажать ЗЕЛЕНУЮ кнопку воспроизведения, и теперь отладчик присоединится к вкладке, которую вы открыли по адресу 127.0.0.1:5500/<path you your file>, и выполните отладку на порту 127.0.0.1:9222.

8) Хэппи Инженеринг :)