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

【问题标题】：How do I debug webpack-dev-server's built-in express server in VS code?如何在 VS 代码中调试 webpack-dev-server 的内置 express 服务器？
【发布时间】：2018-08-05 13:23:58
【问题描述】：

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

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

其中 init 是表单的函数：

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

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

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

【问题讨论】：

标签： javascript node.js express debugging webpack

【解决方案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 调试器之类的工具来做到这一点。

【讨论】：