Question

是否可以配置launch.json来调试webpack dev服务器？就我而言，我正在开发一个通用的（服务器渲染的快速通道）React应用程序，能够直接在VS Code中调试服务器端真的很棒。

Answer 1

我一直在使用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”选项已设置为“source-map”或“cheap-eval-source-map”（我使用“source-map”，其他设置也可以，但是我没有测试过它们）。

- 设置sourceMapPathOverrides -

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

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

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

现在，您应该能够在这里找到转换后的文件和原始源文件（如果没有，请仔细检查“devtool”是否设置为“source-map”或“cheap-eval-source-map”现在，您需要将每个源文件映射到硬盘驱动器上的位置。最好，您希望按文件扩展名映射它们，而不是单独映射。对于Vue，我必须将.js和.vue文件映射到它们的相应位置，单独映射了node-modules文件夹（正如你在我的launch.json中看到的那样）。它可能是一个不同的反应映射。

设置launch.json url以匹配webpack应用程序的URL，并设置launch.json！

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

在vs代码中调试webpack dev服务器？

1 个答案: