VSCode не останавливается в точках останова на удаленном сервере - PullRequest
Новая
       3

VSCode не останавливается в точках останова на удаленном сервере

1 голос
/ 06 мая 2020

Я не могу остановить VSCode в точке останова в приложении, созданном npx create-react-app на гостевой виртуальной машине, работающей в той же системе, что и VSCode.

Я использую VSCode на Windows 10 Pro хост, подключенный к системе Centos 7, работающей на гостевой виртуальной машине с помощью VMWare. Я использую расширение VSCode «Remote S SH», и, похоже, оно в основном работает. Я новичок в этом стеке технологий, поэтому, пожалуйста, простите мою путаницу newb ie.

Я установил точку останова на шестой строке из App.js, созданного create-react-app. Я сделал всевозможные перестановки запуска. json и package. json, похоже, ни одна из них не имеет никакого значения. Я установил «Chrome расширение разработки».

Вот мой запуск. json: 

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "chrome",
            "type": "chrome",
            "request": "launch",
            "preLaunchTask": "debug-start",
            "postDebugTask": "debug-stop",
            "url": "http://192.168.242.128:3000",
            "webRoot": "${workspaceFolder}", 
            "skipFiles": [
              "<node_internals>/**",
              "${workspaceFolder}/node_modules/**",
              "bootstrap"
            ]
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
            "runtimeArgs": [
              "--inspect-brk=covid.guest:9229",
              "start"
            ]
        }
    ]
}

Вот мой пакет. json: 

{
  "name": "home-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Когда я запускаю приложение из меню «Выполнить», запускается сервер разработки, открывается chrome браузер, а на результирующей странице вращается React lo go и написано «Изменить src / App. js и сохраните, чтобы перезагрузить ". Точка останова игнорируется. Пока сервер разработки работает, точка останова представляет собой полый кружок, и его всплывающая подсказка читает «Точка останова установлена, но еще не связана».

«КОНСОЛЬ ОТЛАДКИ» содержит: 

[HMR] Waiting for update signal from WDS...
Download the React DevTools for a better development experience: ...

встроенный терминал содержит: 

Compiled successfully!

You can now view home-react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.242.128:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Обратите внимание, что браузер открыт на моем хосте Windows 10. (Локальный) IP-адрес хоста: 192.168.242.128.

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

Я могу отлаживать приложение node.js, созданное express, и оно генерирует свой собственный порт отладки в следующих строках: 

/home/<user>/.nvm/versions/node/v13.13.0/bin/node --inspect-brk=11875 bin/www

Мне кажется, что мне нужно каким-то образом проникнуть внутрь сервера разработки webpack. Ура.

Как мне заставить этот технологический стек фактически ОСТАНОВИТЬСЯ в точке останова? Что мне нужно сделать, чтобы выполнить привязку к точке останова?

1 Ответ

0 голосов
/ 07 мая 2020

После нескольких дней интенсивных поисков я нашел ответ. Необходимо изменить запись «chrome» в launch.json так, чтобы значение «web Root» было полным путем к файлу - в данном случае "/home/<user>/plain-react-app".

С этим изменением, сопоставление источников работает, и отладчик VSCode останавливается по желанию. реальные примеры. Я думаю, что моя конфигурация (VSCode, работающий на хосте с таргетингом javascript, работающий на гостевой виртуальной машине) довольно распространена, и я думаю, что это использование явного пути к файлу будет необходимо всякий раз, когда браузер работает на другом хосте, чем сервер, к которому он подключается.

...