Запуск Chrome и отладка из кода Visual Studio

Question

Я использую код Visual Studio для отладки некоторых интерфейсных javascript (для плагина Wordpress). У меня возникли проблемы с правильной настройкой файла launch.json.

Я могу запустить хром вручную, а затем подключиться к нему после факта (используя запрос Attach), и в этом случае точки останова javascript работают нормально.

Если я запускаю хром из vscode (используя запрос запуска), он подключается (я вижу консольный вывод), но я не получаю увольнения с точки прерывания. Я предполагаю, что некорректная установка в моем файле launch.json.

{ 
"version": "0.2.0", 
"configurations": [ 
    { 
     "name": "Launch Signup Form", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://myclient.dev/signup-form", 
     "sourceMaps": true, 
     "webRoot": "../../..", 
     "runtimeArgs": [ 
      "--remote-debugging-port=9222" 
     ] 
    }, 

    { 
     "name": "Attach", 
     "type": "chrome", 
     "request": "attach", 
     "port": 9222 
    } 
] 

}

Я пробовал все, что я мог придумать для веб-сервера (в том числе полный локальный путь к веб-корнем «HTDOCS» и относительный путь, который вы видите выше. Это не кажется, все равно, что я положил там, так что, возможно, я ложному дерево

локальная папка проекта находится здесь:.

/home/me/code/vagrant-local/www/wordpress-myclient/htdocs/wp-content/plugins/cee-signup-form

на й е-сервер, который отображает на:

http://myclient.dev/wp-content/plugins/cee-signup-form

На странице «Регистрация-форма» я включаю файл JavaScript в вопросе, используя его полный URL.

Очевидно, что я могу вручную переходить к URL, а затем присоединяться каждый раз, когда хочу отлаживать, но запуск и отладка одним щелчком мыши были бы намного выше.

Что я делаю неправильно?

Answer 1

В моем случае, на Ubuntu 14.04, он работал после добавления

"runtimeExecutable": "/usr/bin/chromium-browser" 

у меня есть, однако, чтобы начать хром заранее.

Answer 2

Оказалось, что это была ошибка в VSCode, и она исправлена ​​в последней версии (1.2.1). После обновления мне пришлось сделать три вещи.

Обновление Chrome Extension

В VSCode, нажмите CTRL + P, чтобы открыть командную палитру, а затем:

Extensions: Show Outdated Extensions 

На данный момент это позволит вам обновить их. Подробнее здесь: https://code.visualstudio.com/Docs/editor/extension-gallery#_update-an-extension

Редактировать запуск конфигурации

Они теперь требуют абсолютные пути для веб-сервера. Итак, мне пришлось изменить свойство файла launch.json, чтобы явно включить корень рабочей области.

"webRoot": "${workspaceRoot}/../../..", 

Закрыть все копии Chrome до отладки

Это раздражает. Но это работает.

Answer 3

Выполните следующие шаги:

1. Проверьте вы установили "VS кодекса - отладчик для Chrome" расширения.

2. Сначала Поместите этот код в .vscode/launch.json:

   { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Node", "port": 9229, "protocol": "inspector", "runtimeExecutable": "npm", "runtimeArgs": [ "run-script", "start" ], "console": "integratedTerminal" }, { "type": "chrome", "request": "launch", "name": "Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}/client/src" } ], "compounds": [ { "name": "Full-stack", "configurations": ["Node", "Chrome"] } ] }

3. Перейдите в режим отладки в VS кодекса и начать с 'Full-стек'.

4. Start НПМ

Смотрите так: https://github.com/auchenberg/timey