VSCode如何调试Angular？ [英] How to debug Angular with VSCode?

问题描述

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

How do I get configure Angular and VSCode so that my breakpoints work?

推荐答案

1. 安装 Chrome Debugger Extension


2. 创建 launch.json


3. 使用我的 launch.json （见下文）


4. 启动NG Live开发服务器（ ng服务）


5. 按 F5

1. Install the Chrome Debugger Extension
2. Create the launch.json
3. Use my launch.json (see below)
4. Start the NG Live Development Server (ng serve)
5. Press 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": "${workspaceRoot}",
      "sourceMaps": true,
      "userDataDir": "${workspaceRoot}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceRoot}",
      "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": "${workspaceRoot}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
        "webpack:///./src/*": "${workspaceRoot}/src/*"
      },
      "userDataDir": "${workspaceRoot}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceRoot}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
        "webpack:///./src/*": "${workspaceRoot}/src/*"
      }
    }
  ]
}

使用角度测试2.4.8

Tested with Angular 2.4.8

这篇关于VSCode如何调试Angular？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！