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

Question

我有一个配置文件，其中在 webpack devServer 配置中使用 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。只需将可执行文件调试为节点文件即可！

这是我的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 调试器之类的工具来做到这一点。