Reactjs VSCode赢得'；t在远程服务器上的断点处停止

我无法使VSCode在与VSCode运行在同一系统上的来宾VM上由

npx create react app

创建的应用程序上的断点处停止

我在连接到Centos 7系统的Windows 10 Pro主机上使用VSCode，该系统在使用VMWare的来宾VM上运行。我使用VSCode的“远程SSH”扩展，它似乎大部分都能工作。我对这项技术还不熟悉，所以请原谅我对新手的困惑

我在

createreact-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"
            ]
        }
    ]
}

当我从“Run”菜单启动应用程序时，开发服务器启动，一个chrome浏览器打开，生成的页面有旋转的React徽标并显示“Edit src/app.js and save to reload”。断点被忽略。开发服务器运行时，断点是一个空心圆，其工具提示为“断点已设置但尚未绑定”

“调试控制台”包含：

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

内置终端包括：

[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

当我使用运行栏或关闭浏览器来停止dev服务器时，终端会告诉我我已经停止了，断点会返回到其纯红外观

我能够调试由

express

生成的node.js应用程序，它会按照以下方式生成自己的调试端口：

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

/home/.nvm/versions/node/v13.13.0/bin/node——检查brk=11875 bin/www

在我看来，似乎我必须以某种方式进入Web包开发服务器。哎呀

---

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

经过几天的紧张摸索，我找到了答案。这是为了更改

launch.json

中的“chrome”条目，以便“webRoot”的值是完整的文件路径——在本例中为

“/home//plain react app”

有了这个更改，源映射就可以工作，VSCode调试器也可以根据需要停止

---

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

经过几天的深入研究，我找到了答案。这是为了更改

launch.json

中的“chrome”条目，以便“webRoot”的值是完整的文件路径——在本例中为

“/home//plain react app”

有了这个更改，源映射就可以工作，VSCode调试器也可以根据需要停止

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