javascript - 如何在 VS 代码中调试 webpack-dev-server 的内置 express 服务器？

Question

我在 webpack devServer config 中有一个配置文件 使用 webpack devServer 配置，我定义了一个快速中间件函数:

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

其中 init 是以下形式的函数:

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

如何调试这个 webpack-dev-server 代码？

如果我可以直接在 VSCode 中调试它，我会更愿意，但我很乐意在必要时使用浏览器内调试。

Answer 1

事实证明，有一种非常简单的方法可以在 VSCode 中调试 webpack-dev-server。只需将可执行文件作为 Node 文件进行调试!

这是我的 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"]
}

注意:对于复制此内容的任何人，您必须将 webpack 配置文件路径 arg 更改为您机器上的任何路径。

您可以用完全相同的方式调试 webpack 构建脚本:

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

注意:这会调试构建/服务器本身。如果要调试输出文件，还需要将调试器附加到 url。您可以使用 chrome 调试器之类的工具来做到这一点。