Reactjs 在vs代码中调试Web包开发服务器？

是否可以配置launch.json以调试webpack dev服务器？在我的例子中，我正在开发一个通用（通过express呈现的服务器）React应用程序，如果能够直接在VS代码中调试服务器端，那就太好了。

我一直在使用Webpack开发VueJS应用程序，经过几个小时的研究，我能够使用VSCode chrome调试器成功地调试它。我知道您的应用程序是一个React应用程序，但我将尝试解释调试工作的步骤。希望这能帮助您配置launch.json，以便在VSCode中调试react/webpack应用程序。这是我的最终launch.json：

    {
        // Using the chrome debugger to debug a Vue application
        "type": "chrome",
        "request": "launch",
        "name": "Chrome launch",
        // Set the URL to match the root URL of your application
        "url":"http://localhost:8000/#/",
        "webRoot": "${workspaceRoot}",
        /** Configure source map paths using the instructions below */
        "sourceMapPathOverrides": {
            "webpack:///./src/*.js": "${workspaceRoot}/src/*.js",
            "webpack:///src/*.vue": "${workspaceRoot}/src/*.vue",
            "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*"
        }
    }

对我来说，关键是在launch.json中正确配置soureMapPathOverrides选项。首先，确保webpack配置中的“devtool”选项已设置为“源地图”或“廉价评估源地图”（我使用了“源地图”，其他设置也可以工作，但我没有测试它们）

--设置sourceMapPathOverrides--

您要做的是将源映射文件（至少对我来说，默认情况下映射不正确）映射到它们在本地计算机上的相应位置。为此，请使用webpack dev server或webpack正常运行该程序。然后，在Chrome中打开它，并打开devtools“sources”选项卡。在“源”选项卡的导航器中（默认情况下位于左侧），打开“网络”选项卡并查看文件夹结构

您应该看到类似以下内容的文件夹结构：

top
    localhost:8000
        assets
        src
        ...
    (no domain)
        ...
    webpack://
        (webpack)
            ...
        (webpack)-dev-server
            ...
        .
            ...
        src
            ...

现在，您应该能够在此处的某个位置找到传输文件和原始源文件（如果没有，请仔细检查“devtool”是否设置为“源地图”或“廉价评估源地图”）。现在，您需要将每个源文件映射到它们在硬盘上的位置。最好是按文件扩展名映射，而不是单独映射。对于Vue，我必须将.js和.Vue文件映射到它们相应的位置，节点模块文件夹单独映射（如我的launch.json中所示）.对于react，这可能是一个不同的映射

将launch.json url设置为与Web包应用程序的url匹配，并且应设置launch.json

---

现在，您应该能够使用webpack dev server（或webpack）运行该文件然后启动调试器。您应该能够在VSCode中设置断点并进行正常调试。希望这对其他人有所帮助。

这不是您想要的，但这可能会对您有所帮助：我有同样的问题。我看到了这篇博文，可能会有所帮助。