Question

如何配置Angular和VSCode以便我的断点有效？

Answer 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 Development Server（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/*"
      }
    }
  ]
}

Answer 2

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

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

b.fooContext

Answer 3

Visual Studio代码网站上详细说明了这一点：https://code.visualstudio.com/docs/nodejs/angular-tutorial

Answer 4

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

这两个过程的关键点是同时运行 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
转到VSCode调试器并运行“ Angular调试会话”配置。结果，将打开带有您的应用程序的新浏览器窗口。

附加到现有进程

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

Mac：

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

Windows：

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
选择“ Chrome附加”配置并运行它。

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

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

Simple instruction how to configure debugger for Angular in VSCode

Answer 5

@Asesjix的答案非常彻底，但是正如某些人指出的那样，仍然需要多次交互才能启动ng serve，然后在Chrome中启动Angular应用程序。我使用以下配置单击一下就可以使用此功能。与@Asesjix答案的主要区别是任务类型现在为shell，并且命令调用在start之前添加了ng serve，因此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"
        }
    ]
}

Answer 6

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

如果运行MEAN堆栈，还添加了Express Server的设置。

{
  // 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"
      ]
    }
  ]
}

Answer 7

可以使用此配置：

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

Answer 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，我认为它称为“为其他命令创建任务”或类似的名称。创建task.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？

8 个答案:

使用Angular 5 / CLI 1.5.5

使用Angular 2.4.8

启动一个过程

附加到现有进程