Attaching grunt to VSCODE debugger

Question

I am trying to attach my default grunt tasks to vscode debugger. So my desired workflow is I start the debugger and it runs the default grunt tasks and then I am able to put breakpoints in my code using vscode debugger. My launch JSON file looks like this.

{
    "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
        }
    ]
}

But I am getting an error can't launch program 'node_modules/grunt/lib/grunt'; setting the 'outfiles' attribute might help

What does your grunt task do? Does it just run the application or there is a compilation step? If it's the first, then there are already many similar questions for task runners, e.g. http://stackoverflow.com/questions/43210203/what-is-the-proper-way-to-debug-an-npm-script-using-vscode/43212281#43212281. If your `run` task also compiles sources then you can define a Node.js debugg configuration with a `preLaunchTask` option set. — Jakub Synowiec, Apr 18 '17 at 06:36
@jsynowiec its the latter, can you direct me on how to achieve this — lboyel, Apr 18 '17 at 16:14

score 3 · Accepted Answer · answered Apr 18 '17 at 20:36

If you want to debug your compiled code, you have to define the build task in tasks.json and then specify it as a preLaunchTask in your launch.json configuration.

Also remember to augment your build config so it outputs source maps. With source maps, it is possible to single step through or set breakpoints in the original source.

You need to configure the tasks in a tasks.json file (located under your workspace .vscode folder). If you don't already have a tasks.json file, running the Tasks: Configure Task Runner action from the Command Palette (⇧+⌘+P on macOS or F1 on Windows/Linux) will offer you a set of templates to pick from. Select Grunt from the list and it will generate a file that should look like this:

{
  // 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"
}

now you can define your build task:

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

Assuming that your Grunt builds your app from src/app.js to dist, you can define your launch configuration like this:

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

You can read more in the VS Code documentation - Node.js Debugging in VS Code.

This does not remotely answer the question asked. The question asked is about debugging the build itself, not the result of the build. — gman, Jun 23 '19 at 13:59

Attaching grunt to VSCODE debugger

1 Answers1

Linked