VSCode 不会在远程服务器上的断点处停止答案

【问题标题】：VSCode won't stop at breakpoints on remote serverVSCode 不会在远程服务器上的断点处停止
【发布时间】：2020-08-20 16:39:10
【问题描述】：

我无法让 VSCode 在与 VSCode 运行在同一系统上的来宾 VM 上由 npx create-react-app 创建的应用程序的断点处停止。

我在 Windows 10 Pro 主机上使用 VSCode，该主机连接到使用 VMWare 在来宾 VM 上运行的 Centos 7 系统。我使用 VSCode 的“远程 SSH”扩展，它似乎主要工作。我是这个技术堆栈的新手，所以请原谅我的新手困惑。

我在create-react-app 生成的App.js 的第六行设置了一个断点。我已经对 launch.json 和 package.json 进行了各种排列，似乎根本没有任何区别。我已经安装了“Chrome 开发扩展”。

这是我的 launch.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"
            ]
        }
    ]
}

这是我的 package.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 徽标并显示“编辑 src/App.js 并保存以重新加载”。断点被忽略。在开发服务器运行时，断点是一个空心圆圈，其工具提示显示“Breakpoint set but not yet bound”。

“调试控制台”包含：

[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。

当我停止开发服务器时，无论是使用运行栏还是关闭浏览器，终端都会告诉我我已经停止，并且断点恢复为纯红色外观。

我能够调试由express 生成的 node.js 应用程序，它会生成自己的调试端口：

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

在我看来，好像我必须以某种方式进入 webpack 开发服务器。哎呀。

如何让这个技术栈在断点处真正停止？我必须做什么才能真正绑定到断点？

【问题讨论】：

标签： reactjs visual-studio-code

【解决方案1】：

经过几天的激烈探索，我找到了答案。就是更改launch.json 中的“chrome”条目，使“webRoot”的值是完整的文件路径——在本例中为"/home/<user>/plain-react-app"。

通过该更改，源映射工作，并且 VSCode 调试器根据需要停止。

VSCode 文档中有关“webRoot”如何使用的一些简单明了的解释性文本以及一些实际示例对我的学习曲线有很大帮助。我认为我的配置（在主机上运行的 VSCode 目标是在 guestVM 上运行的 javascript）相当普遍，而且我认为只要浏览器在与其连接的服务器不同的主机上运行，就需要使用显式文件路径。

【讨论】：