Attaching grunt to VSCODE debugger

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/43454168/attaching-grunt-to-vscode-debugger

标签

javascript

debugging

visual-studio-code