CODEWITHSUNDEEP
javascriptnode.jsexpressdebuggingwebpack
keithlee96
keithlee96

Reputation: 1944

How do I debug webpack-dev-server's built-in express server in VS code?

I've got a configuration file where in the webpack devServer config Withing the webpack devServer config, I have defined a express middleware function:

devServer: {
    before(app){
        init(app);
    },
    ...
}

Where init is a function of the form:

init(app){
    app.get('/endpoint', (req,res,next)=> {...;debugger; next();});
    ...
}

How can I debug this webpack-dev-server code?

I would prefer if I could debug it straight in VSCode, but I'm happy to use in-browser debugging if necessary.

Upvotes: 4

Views: 5112

Answers (1)

keithlee96
keithlee96

Reputation: 1944

As it turns out, there was a pretty simple way to debug webpack-dev-server in VSCode. Just debug the executable as a node file!

Here was my launch.json:

{
    "type": "node",
    "request": "launch",
    "name":"launch webpack-dev-server",
    "program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "args": ["--progress", "--inline", "--config", "build/webpack.dev.conf.js"]
}

Note: For anyone who copies this, you will have to change the webpack configuration file path arg to whatever it is on your machine.

You can debug webpack build scripts in the exact same way:

{
    "type": "node",
    "request": "launch",
    "name":"launch webpack",
    "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js",
    "args": ["--progress", "--config", "build/webpack.prod.conf.js"]
},

Note: this debugs the build / server itself. If you want to debug the output files, you need to also attach a debugger to the url. You can do that using using something like the chrome debugger.

Upvotes: 6

Related Questions