如何使用 VSCode 调试 Angular？答案

【问题标题】：How to debug Angular with VSCode?如何使用 VSCode 调试 Angular？
【发布时间】：2017-07-18 15:37:28
【问题描述】：

如何配置 Angular 和 VSCode 以便我的断点工作？

【问题讨论】：

什么意思？他们怎么不工作？
@TylerH，它应该是它如何工作的指南。如果不修改launch.json，它就无法工作。
要在后台启动ng serve，请在此处查看答案：link
在这一点上，角度是一团糟，与应用程序的第一次接触很糟糕，你不能简单地使用你 Vscode 的 PLAY & DEBUG，因为嬉皮士认为命令行是时尚的，所以如果你想简单地运行或调试或附加您的项目，但不！您必须使用 CLI + create.json+ 创建更多内容。考虑您正在使用的版本，以便您看到的配置可以正常工作。他们甚至可以在我们创建项目时添加一个简单的launch,json，但为什么要让开发者体验更好呢？只需添加更多 CLI！嘘.....

标签： angular debugging webpack visual-studio-code

【解决方案1】：

使用 Angular 5 / CLI 1.5.5 测试

安装Chrome Debugger Extension
创建launch.json（在.vscode 文件夹内）
使用我的launch.json（见下文）
创建tasks.json（在.vscode 文件夹内）
使用我的tasks.json（见下文）
按 CTRL+SHIFT+B
按 F5

launch.json for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

使用 Angular 2.4.8 测试

安装Chrome Debugger Extension
创建launch.json
使用我的launch.json（见下文）
启动 NG Live 开发服务器 (ng serve)
按 F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

【讨论】：

您知道如何启动NG Live Development Server，然后只需单击一次F5@ 即可启动Chrome？
抱歉，这是不可能的，因为任务“ng serve”必须在 preLaunchTask 中启动。 “ng serve”必须永久运行，因此“preLaunchTask”未完成，这意味着 vs 代码不会启动调试过程。但我添加了一个新配置，应该会使工作更快一点;-)
清晰而简短的答案。如果你能简短地解释一下launch.json 和tasks.json 在这里做的事情，那就太好了。据我了解launch.json是启动节点服务器并监听8080端口，tasks.json指示使用npm并执行命令ng serve运行应用程序。
我遇到了同样的问题，没有设置断点，直到最后我意识到我的 webroot 是错误的。我有 webRoot ("webRoot": "${workspaceFolder}") 的默认值，而不是 ${workspaceFolder}/my-app-folder
Chrome 调试器扩展现已弃用

【解决方案2】：

这是一个更轻量级的解决方案，适用于 Angular 2+（我使用的是 Angular 4）

如果您运行 MEAN 堆栈，还添加了 Express 服务器的设置。

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

【讨论】：

你能在使用这个配置的同时调试/断点你的服务器端代码吗？
@Mika571 不，不幸的是......我现在试过了。我也想同时调试服务器端和客户端。

【解决方案3】：

看起来 VS Code 团队现在正在存储调试配方。

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}

【讨论】：

【解决方案4】：

这在 Visual Studio Code 网站上有详细解释：https://code.visualstudio.com/docs/nodejs/angular-tutorial

【讨论】：

您的意思是code.visualstudio.com/docs/nodejs/… 吗？如果您想编辑答案，·#_debugging-angular 直接指向有趣的点...
@Pipo 不，我不是说nodejs，我没有在服务器端使用nodejs，所以我不知道。

【解决方案5】：

有两种不同的方法可以做到这一点。您可以启动新进程或附加到现有进程。

这两个进程的关键是让webpack 开发服务器和 VSCode 调试器同时运行。

启动进程

在您的launch.json 文件中添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular debugging session",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

通过执行 npm start 从 Angular CLI 运行 Webpack 开发服务器
转到 VSCode 调试器并运行“Angular 调试会话”配置。结果，将打开您的应用程序的新浏览器窗口。

附加到现有进程

为此，您需要在调试器模式下运行 Chrome 并打开端口（在我的情况下它将是 9222）：

苹果机：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

窗户：

chrome.exe --remote-debugging-port=9222

launch.json 文件将如下所示：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}

通过执行 npm start 从 Angular CLI 运行 Webpack 开发服务器
选择“Chrome Attach”配置并运行。

在这种情况下，调试器附加到现有的 Chrome 进程，而不是启动一个新窗口。

我写了自己的文章，并用插图描述了这种方法。

Simple instruction how to configure debugger for Angular in VSCode

【讨论】：

谢谢，每次启动chrome我都要运行这个命令chrome.exe --remote-debugging-port=9222。一次性配置有没有其他选择
根据您的凭据，您可以在 Windows 开始菜单中右键单击 chrome，点击属性，然后在此处添加标志。这在我的工作计算机上对我不起作用，因此我在 git bash for windows 中为该命令起别名。
@Saurabh47g 您可以将 chrome.exe --remote-debugging-port=9222 添加到桌面 chrome 图标步骤： - 打开您的桌面 - 右键单击 Google Chrome -点击属性 - 在目标字段中粘贴 chrome.exe --remote-debugging-port=9222

【解决方案6】：

可以使用这个配置：

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}

【讨论】：

【解决方案7】：

@Asesjix 的回答非常彻底，但正如一些人指出的那样，仍然需要多次交互才能启动ng serve，然后在 Chrome 中启动 Angular 应用程序。我使用以下配置只需单击一下即可完成此操作。与@Asesjix 的答案的主要区别在于任务类型现在是shell，并且命令调用在ng serve 之前添加了start，因此ng serve 可以存在于它自己的进程中并且不会阻止调试器启动：

tasks.json：

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}

【讨论】：

这会卡在运行 ng serve 的 shell 中，而不会启动 chrome。
start ng serve 不是一个有效的命令
start 是一个 Windows CMD 命令。 ng serve 是一个 Angular 命令。如果您在使用 Windows CMD 时收到 start my serve 无效的消息，我猜您的路径中没有正确安装 Angular。
ubiquibacon: 嗯...我按照您上面的步骤进行操作，但弹出了一个名为 ng.ps1 的文件。我可以在包含 Angular 项目的文件夹中运行 ng serve，但如果我使用 start ng serve，则会弹出类似的文件 ng.ps1
对不起，我已经放弃了 Angular 转而使用 Flutter，所以我认为我不会在这里提供太多帮助。我已经清除了所有与 Angular 相关的内存（和硬盘）。

【解决方案8】：

在我的情况下，我没有使用原始的 Angular 项目文件夹树，我知道 webRoot / {workspaceFolder} 位有问题，但我所有的实验都没有结果。从另一个 SO 答案中得到提示，如果我再次找到它，我会链接。

帮助我的是在运行时找到变量{workspaceFolder} 的内容，然后将其修改为我的“src”文件夹的位置，您在该文件夹下有“app/*”。为了找到它，我在我的 launch.json 文件中添加了一个 preLaunchTask，并添加了一个输出 {workspaceFolder} 值的任务。

launch.json，安装 Chrome 调试器后出现

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json 默认情况下不存在。按 Ctrl+Shift+p，我认为它被称为“为其他命令创建任务”或类似的东西。创建 tasks.json 后似乎看不到它。您也可以在与 launch.json

相同的位置创建文件

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

一旦我知道 ${workspaceFolder} 的值，我将其修复为指向我的新项目树中的 src 文件夹，并且一切正常。调试需要 ng serve 作为预启动任务或作为构建的一部分（上面的示例）或在命令提示符中运行。

Here 是您可以使用的所有变量的链接：

【讨论】：