javascript - 将 grunt 附加到 VSCODE 调试器

Question

我正在尝试将我的默认 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' 属性可能会有所帮助

Answer 1

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

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

您需要在 tasks.json 文件(位于工作区 .vscode 文件夹下)中配置任务。如果您还没有 tasks.json 文件，请从命令面板 (⇧+< kbd>⌘+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 .