将grunt附加到VSCODE调试器

时间:2017-04-17 15:11:33

标签: javascript debugging visual-studio-code

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

1 个答案:

答案 0 :(得分:2)

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

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

您需要在tasks.json文件(位于工作区.vscode文件夹下)中配置任务。如果您还没有tasks.json文件,请从命令选项板运行任务:配置任务运行器操作( + ⌘ + P 或Windows / Linux上的 F1 将为您提供一组可供选择的模板。从列表中选择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