如何使用 VSCode 调试 Angular？

Posted

技术标签:

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

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

【问题讨论】：

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

【讨论】：

以上是关于如何使用 VSCode 调试 Angular？的主要内容，如果未能解决你的问题，请参考以下文章

如何从 VS Code 调试 Angular 6 子项目

如何使用 Angular 和 Flutter（都是 Dart）为工作区设置 VS Code 调试？

Angular最新教程-第三节在谷歌浏览器中调试Angular

VS Code：使用 express 帮助调试 Angular 2

如何使用vscode断点调试laravel

[Node] 如何使用 VSCode 调试 child_process