如何使用VSCode调试Angular？

Question

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

Answer 1

使用Angular 5/CLI 1.5.5进行测试

1. 安装Chrome调试程序扩展
2. 创建launch.json(内部.vscode文件夹)
3. 用我的launch.json(见下文)
4. 创建tasks.json(内部.vscode文件夹)
5. 用我的tasks.json(见下文)
6. 按CTRL+ SHIFT+B
7. 按 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测试

1. 安装Chrome调试程序扩展
2. 创建 launch.json
3. 用我的launch.json(见下文)
4. 启动NG Live Development Server(ng serve)
5. 按 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/*"
      }
    }
  ]
}

Answer 2

看起来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"]
    }      
  ]
}

Answer 3

有两种不同的方法。您可以启动新流程或将其附加到现有流程。

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

启动一个过程

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

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

2. 通过执行以下命令从Angular CLI运行Webpack开发服务器 npm start

3. 转到VSCode调试器并运行“ Angular调试会话”配置。结果，将打开带有您的应用程序的新浏览器窗口。

附加到现有流程

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

   苹果电脑：

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

   视窗：

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

2. launch.json 文件将以以下方式显示：

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

3. 通过执行以下命令从Angular CLI运行Webpack开发服务器 npm start
4. 选择“ Chrome Attach”配置并运行它。

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

我写了自己的文章，并在其中举例说明了这种方法。

简单说明如何在VSCode中为Angular配置调试器

Answer 4

这在Visual Studio代码站点上有详细解释:https://code.visualstudio.com/docs/nodejs/angular-tutorial

Answer 5

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

任务.json：

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

启动.json：

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

Answer 6

可以使用这个配置：

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

Answer 7

如何为您的角度应用程序提供服务并在单个配置中将调试器附加到它

launch.json文件中的复合选项允许您创建一个可以同时启动多个启动配置的启动配置。例如，如果您想要启动 Web 服务器并将调试器附加到它（以及为什么不启动后端），或者如果您有任何其他特定要求，这非常有用。

你可以这样使用它：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Angular Debug",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            },
        },
        {
            "name": "Angular Serve",
            "command": "ng serve --open",
            "request": "launch",
            "type": "node-terminal",
            "cwd": "${workspaceFolder}",
        },
    ],
    "compounds": [
        {
          "name": "Angular Launch",
          "configurations": ["Angular Serve", "Angular Debug"]
        }
      ]
}

现在您有了一个可以正常工作的调试器，可以在 VSCode 中使用单个 F5 启动它。