将 grunt 附加到 VSCODE 调试器答案

【问题标题】：Attaching grunt to VSCODE debugger将 grunt 附加到 VSCODE 调试器
【发布时间】：2017-09-13 05:31:05
【问题描述】：

我正在尝试将我的默认 grunt 任务附加到 vscode 调试器。所以我想要的工作流程是我启动调试器并运行默认的 grunt 任务，然后我可以使用 vscode 调试器在我的代码中放置断点。我的启动 JSON 文件如下所示。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/node_modules/grunt/lib/grunt",
            "args": ["run"],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
            "--nolazy"
            ],
            "env": {
                "NODE_ENV": "production"
            }
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858
        }
    ]
}

但我收到一个错误，无法启动程序“node_modules/grunt/lib/grunt”；设置 'outfiles' 属性可能会有所帮助

【问题讨论】：

你的繁重任务是做什么的？它只是运行应用程序还是有编译步骤？如果是第一个，那么任务运行者已经有很多类似的问题，例如stackoverflow.com/questions/43210203/…。如果您的 run 任务还编译源代码，那么您可以使用 preLaunchTask 选项集定义 Node.js 调试配置。
@jsynowiec 是后者，你能指导我如何实现这一目标

标签： javascript debugging visual-studio-code

【解决方案1】：

如果要调试已编译的代码，则必须在 tasks.json 中定义构建任务，然后在 launch.json 配置中将其指定为 preLaunchTask。

还记得扩充您的构建配置，以便输出源映射。使用源映射，可以单步执行或在原始源中设置断点。

您需要在tasks.json 文件（位于您的工作区.vscode 文件夹下）中配置任务。如果您还没有 tasks.json 文件，请从命令面板运行 Tasks: Configure Task Runner 操作 (⇧+⌘ +P 在 macOS 上或 F1 在 Windows/Linux 上）将为您提供一组可供选择的模板。从列表中选择Grunt，它将生成一个如下所示的文件：

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "0.1.0",
  "command": "grunt",
  "isShellCommand": true,
  "args": ["--no-color"],
  "showOutput": "always"
}

现在您可以定义构建任务了：

{
  ...
  "showOutput": "always",
  "tasks": [
    {
      "taskName": "build",
      "args": [],
      "isBuildCommand": true
    }
  ]

假设您的 Grunt 将您的应用从 src/app.js 构建到 dist，您可以像这样定义您的启动配置：

{
  "type": "node",
  "request": "launch",
  "name": "Launch",
  "program": "${workspaceRoot}/src/app.js",
  "sourceMaps": true,
  "outFiles": ["${workspaceRoot}/dist/**/*.js"],
  "preLaunchTask": "build"
}

您可以在 VS Code 文档中阅读更多内容 - Node.js Debugging in VS Code。

【讨论】：

这并不能远程回答所提出的问题。问的问题是关于调试构建本身，而不是构建的结果。