Debugging webpack dev server in vs code?

Question

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.

Answer 1

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/*"
        }
    }

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

--Setting the sourceMapPathOverrides--

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

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.

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

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.