将Grunt附加到VSCODE调试器 [英] Attaching grunt to VSCODE debugger

问题描述

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

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

但是我遇到一个错误，无法启动程序'node_modules / grunt / lib / grunt';设置'outfiles'属性可能有帮助

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

推荐答案

如果要调试已编译的代码，则必须在 tasks.json ，然后在 launch.json preLaunchTask c $ c>配置。

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.

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

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

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

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

您可以在VS Code文档中阅读更多内容- VS代码中的Node.js调试。

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

这篇关于将Grunt附加到VSCODE调试器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！