Question

我有一个JS网络应用程序，该应用程序具有客户端和服务器捆绑包，均使用webpack的节点api构建。

以开发人员模式运行我的项目需要执行以下步骤：

运行两个Webpack构建，生成两个输出文件。
服务器捆绑包输出到dist / server / index.js
使用dist / server / index.js路径生成子节点进程
观察文件夹中的更改。更改后，终止旧的子进程，然后重新运行步骤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
        }
    ]
}

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

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

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

谢谢！

Answer 1

不知道您的webpack配置和服务器源文件就很难回答。尽管如此，我还是给它一个机会：

Re 1。）

您是否尝试将autoAttachChildProcesses（VS Code docs）属性包含在调试配置中？

{
  "name": "Attach to dev server",
  "type": "node",
  ...
  "autoAttachChildProcesses": true
}

这样，VS Code将自动附加到在调试模式下启动的子进程。子进程的调试模式表示是否使用以下程序参数之一启动它们：--inspect, --inspect-brk, --inspect-port, --debug, --debug-brk, --debug-port。例如。您可以使用--inspect而不是--inspect-brk，因此第1行没有硬停顿，而VS Code仍应允许您调试子项。

话虽这么说，最好为服务器设置一个单独的调试启动配置，而不是始终使用硬编码的调试标志启动它（如果我正确理解了您的情况）。因此，当您不使用调试器时，您将不会遇到挂起问题。

Re 2。）

localRoot，remoteRoot和address用于远程调试，如果您在同一台计算机上工作，则它们与您无关。

如果您使用babel-loader进行babel转换，则webpack应该考虑并自动映射源地图，并且可以直接使用。另外，默认情况下，VS Code默认在调试配置中包括"sourceMaps": true。

现在，这是webpack的棘手问题：如VS Code节点调试docs中所述（真的很好，我建议您阅读所有内容）：

默认情况下，它输出带有webpack：///前缀的路径，调试适配器无法解析该路径。您可以使用devtoolModuleFilenameTemplate选项在Webpack配置中更改此设置，或尝试使用“检查器”协议，该协议提供了一些其他选项来解析这些路径。

Sourcemaps将通过webpack:///前缀（默认为每个webpack）引用其（未编译的）源，因此您必须a）更改webpack的配置或b）说出VS Code如何解决它。

a）通过Webpack配置中的devtoolModuleFilenameTemplate属性

示例（请参见this repo）：

{
  // ... other things in webpack config ...
  output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'
  }
}

b）在VS Code调试配置中指定sourceMapPathOverrides（外观为here）：

{
      "type": "node",
      "request": "attach",
      ...
      "sourceMapPathOverrides": {
         "webpack:///*": "${workspaceRoot}/*"
      }
}

前缀${workspaceRoot}在大多数情况下应该可以，但是您可以查看源映射sources的路径，以获取有关如何解决它的更多信息。似乎还为webpack（here）配置了一些默认映射，但是它似乎仅适合客户端调试，因为在那里指定了webRoot。

希望，这可以帮助您并朝正确的方向发展。

欢呼

具有自定义Webpack构建的vscode节点调试器

1 个答案: