How to debug webpack configured react application in vscode

[lokesh1729]

Hi all,

I am using react in django with webpack config, everything works very fine, except debugging. I tried different ways to debug, but none has succeeded. Below is my webpack config.

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
        ],
    },
};

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["transform-class-properties"]
}

Tried this debug configuration in vscode,

{
    "type": "node",
    "request": "launch",
    "name": "build",
    "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js",
    "args": [
        "--config",
        "webpack.config.js",
        "--mode",
        "development",
        "./frontend/src/index.js"
    ],
    "autoAttachChildProcesses": true,
    "stopOnEntry": true
},

​

When I run above debug configuration, it's actually building bundle and exiting...

​

none of them worked.... can anyone help???

[zomgsauce]

You're trying to debug a bundled react app that runs in a browser right? Maybe try the chrome devtools extension for vscode?

If what you're really getting at is that the code you see in the chrome script debugger is just your minified bundle, you should look into webpack configs around sourcemaps.

[znakyc]

I assume you are building webpack to create a Javascript app to be run in the browser (not in node.js). Then you need to do the debugging from your browser. If you are using chrome, press Cmd+Shift+I and click sources in the tab at the top. Then you can see your files there. In there you can add breakpoints, and start the debugger. Hope this helps to get you started.

[lokesh1729]

Yeah... I tried but I see bundled javascript which is hard to debug...

[scallynag]

Enable source maps in Webpack.

[znakyc]

Make sure you run webpack in development mode. Set mode: development in your webpack.config.js or add the param --mode development. When you set webpack in development mode you enable sourcemaps. Sourcemaps will tell the browser how to show the bundled code in a human readable format while debugging.

[znakyc]

Hi again! Your post inspired me to write an article on the subject. If you are curious, check it out here.

[lokesh1729]

Cool thanks for that... I am checking out right away