带有自定义 webpack 构建的 vscode 节点调试器

Question

我有一个 JS Web 应用程序，它有一个客户端和服务器包，两者都是使用 webpack 的节点 api 构建的。

在开发模式下运行我的项目需要经过以下步骤：

1. 运行两个 webpack 构建，产生两个输出文件。
2. 服务器包输出到 dist/server/index.js
3. 使用 dist/server/index.js 路径生成子节点进程
4. 监视文件夹的更改。发生更改时，终止旧的子进程并重新运行步骤 1-3

我想使用 vscode 添加节点服务器调试。

到目前为止，当我启动新的子进程时，我在步骤 3 中添加了以下标志。

['--inspect=9222', '--no-lazy', '--inspect-brk']

我在 vscode 中的 launch.json 文件如下所示

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to dev server",
            "type": "node",
            "request": "attach",
            "protocol": "inspector",
            "address": "localhost",
            "port": 9222,
            "restart": true,
            "trace": true,
            "stopOnEntry": true
        }
    ]
}

当我启动服务器并运行调试器时，一切都正常。

但是，我很想修复以下两件事：

1. 即使使用"stopOnEntry": true，调试器也不会拾取任何断点，除非我"--inspect-brk"在启动子进程时添加断点。这很烦人，因为如果我不运行调试器，进程将挂起并且不会继续执行。包含此标志后，当我运行调试器时，构建的dist/server/index.js文件将在编辑器中打开，并在第 1 行设置断点。如果我点击“继续”，则所有未来的调试都会起作用。
2. 我使用 webpack 的“inline-source-map”选项生成源映射。这会将“原始源”放入构建的文件中。不过，这是babel转换后的源码，调试代码有点烦人。E.g. _myFunction.default instead of myFunction。vscode 是否有办法将构建的 .js 文件正确映射到我的项目中预构建的源代码？我看到了remoteRoot和localRoot选项，但无法让它们工作（并且不确定这些选项是否正确）。

谢谢！

Answer 1

更新 VS Code 1.47+：

使用VS Code 1.47及更高版本中的新 JavaScript 调试器，子进程，可以在 Node.js 中自动调试子进程 - 只需在需要的地方设置断点即可。

示例launch.json（使用 TypeScript 源代码来说明源映射方法）：

{
  "type": "pwa-node",
  "request": "launch",
  "name": "Launch Program",
  "skipFiles": ["<node_internals>/**"],
  "program": "${workspaceFolder}/main.ts", // use .ts source
  "outFiles": ["${workspaceFolder}/dist/**/*.js"], // search here for sourcemaps 
}

例子main.ts：

const { spawn } = require("child_process");
const args = [path.resolve("./child.js")];
const proc = spawn(process.execPath, args, { stdio: "inherit" });

请参阅这篇文章了解 的解释pwa-node。

VS Code 调试选项

program：指定要调试的主源文件。您可以直接引用.ts源文件 - VS Code 将在工作区中搜索源映射或查阅outFiles。

outFiles：告诉 VS Code 在这些 glob 位置中显式搜索源映射。

sourceMaps：VS 代码是否应查找源映射；默认为true，所以无需设置。

stopOnEntry：程序启动时立即中断- 与第一行的断点相同。¹

nolazy：确保在代码运行之前验证断点并且不会“跳转”。默认情况下，VS Code自动设置此标志，因此可以将其忽略。

remoteRoot/ localRoot：用于远程调试，与生成源映射没有直接关系（请参阅OP问题）。

autoAttachChildProcesses：用于自动附加到在调试模式下启动的子进程；无需使用新的调试器进行设置。

节点调试选项

--inspect：以调试模式启动程序，无需等待调试器连接。
--inspect-brk：与相同--inspect，但在启动之前等待调试器连接。

您可以设置其中之一来为在命令行上启动的程序启用调试模式。注意：VS Code 现在还可以从集成终端自动附加，而无需给出这些标志。

使用 Webpack 生成源映射

对于 webpack，您可以使用或²生成源映射。inline-source-mapsource-map

// inside webpack.config.js
devtool: "inline-source-map",

如果babel-loader使用，则 webpack 应考虑源映射并自动将其与上述配置条目合并。对于 TypeScript，请参阅Webpack 文档。

（旧）调试子遗留解决方案

如果这在旧版本中不起作用，请为 / 传递一个条件环境DEBUG变量：--inspect--inspect-brkautoAttachChildProcesses

const runner = spawn(process.execPath,
  [...(process.env.DEBUG === "true" ? ["--inspect-brk"] : []), ...args],
);

// inside launch.json configuration
"env": {
  "DEBUG": "true"
},

¹ _{尽管有此开发人员评论，但尚未stopOnEnty传播到我的子进程 - 即使从开始处理子进程。autoAttachChildProcesses--inspect}

² _{根据我的经验，这些选项提供了最佳兼容性。}