在 vs 代码中调试 webpack 开发服务器? [英] Debugging webpack dev server in vs code?

问题描述

是否可以配置launch.json来调试webpack开发服务器?就我而言，我正在开发一个通用的(服务器通过 express 渲染的)React 应用程序，能够直接在 VS Code 中调试服务器端真的很棒.

Is it possible to configure launch.json for debugging webpack dev server? In my case, I'm working on a universal (server-rendered via express) React app and it would be really nice to be able to debug the server side directly in VS Code.

推荐答案

我一直在使用 Webpack 开发 VueJS 应用程序，经过几个小时的挖掘，我能够使用 VSCode chrome 调试器成功调试它.我知道您的应用程序是 React 应用程序，但我会尝试解释我为调试工作所经历的步骤.希望这有助于您配置 launch.json 以在 VSCode 中调试 react/webpack 应用程序.这是我最后的launch.json:

I've been working on a VueJS application using Webpack and I was able to successfully debug it using the VSCode chrome debugger after digging around for a few hours. I know your application is a React one, but I'll try and explain the steps I went through to get debugging working. Hopefully that helps you configure your launch.json to debug a react/webpack app in VSCode. Here was my final 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"，其他设置也可能有效，但我没有测试过它们).

The key for me was correctly configuring the soureMapPathOverrides option in launch.json. First, make sure that the "devtool" option in the webpack config has been set to either "source-map" or "cheap-eval-source-map" (I used "source-map", other settings may also work, but I have not tested them).

--设置sourceMapPathOverrides--

--Setting the sourceMapPathOverrides--

您想要做的是将源映射文件(默认情况下似乎被错误映射，至少对我而言)映射到它们在本地计算机上的相应位置.为此，请使用 webpack-dev-server 或 webpack 正常运行程序.然后，在 Chrome 中打开它并打开 devtools 的sources"选项卡.在来源"选项卡的导航器中(默认位于左侧)，打开网络选项卡并查看文件夹结构.

What you want to do is map the source map files (which seem to be incorrectly mapped by default, at least for me) to their corresponding location on your local machine. To do this, run the program normally using webpack-dev-server or webpack. Then, open it up in Chrome and open up the devtools "sources" tab. In the "sources" tab, within the navigator (on the left by default), open the network tab and look at the folder structure.

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

You should see a folder structure that is something like:

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 来说，这可能是不同的映射.

Now, you should be able to find both the transpiled files and your original source files somewhere here (If not, double check your "devtool" was set to "source-map" or "cheap-eval-source-map". Now, you need to map each source file to their location on your hard drive. Preferably, you want to map them by file extension, rather than individually. In the case of Vue, I had to map .js and .vue files to their corresponding locations, with the node-modules folder mapped separately (as you can see in my launch.json). It's probably going to be a different mapping for react.

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

Set the launch.json url to match the URL of your webpack application and your launch.json should be set!

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

Now, you should be able to run the file using webpack-dev-server (or webpack) and then start the debugger. You should be able to set breakpoints in VSCode and debug as normal. Hopefully this helps someone.

这篇关于在 vs 代码中调试 webpack 开发服务器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！