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

Question

是否可以配置launch.json 来调试webpack 开发服务器？就我而言，我正在开发一个通用（通过 express 服务器渲染）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 中看到的那样）。它可能会是一个不同的 react 映射。

设置launch.json url 以匹配你的webpack 应用程序的URL 并且你的launch.json 应该被设置！

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