Question

我读了很多相关的问题，调试不起作用。在我的情况下，它的工作原理，但它“很奇怪”。我在一行代码中设置了断点，但它在完全不同的行中断。我觉得它与源地图有关，但不确定它是什么。

环境：

最新的vscode（1.21.1）
安装了最新的Chrome调试程序扩展程序
最快的npm / angular CLI
最新Chrome（65.0.33 ...）

使用带ng new

的CLI生成项目

为F5启动器（launch.json）添加了以下配置：

 "configurations": [        
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]

这是app.component.ts的代码：

import { Component, OnInit } from '@angular/core';
import { isUndefined } from 'util';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = "Portal";

  ngOnInit(): void {

    this.test();
  }

  test() {
    const person = { FirstName: "John" };
    person.FirstName = "sf";

    let b = "test string";

    b = "other string";
  }
}

在b = "other string"

之类的地方设置断点

在终端ng serve照常使用点击F5 - Chrome会打开并显示主屏幕。

问题1： Chrome根本没有刹车。

当我刷新Chrome页面时 - 断点受到攻击但位置错误。它可以在ngOnInit或Component行，非常“随机”。

问题2：在错误的一行发生破坏

有没有办法让这项工作成功，所以我可以使用VSCode轻松设置和调试？

Answer 1

很难说为什么事情在您的设置中表现得很奇怪。我也使用VSCode来调试Angular应用程序，我的设置工作得非常好，我将在这里分享它，以便它可以提供帮助。

确保已安装Chrome Debugger extension
修改您的launch.json看起来像这样

＆＃13;

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

＆＃13;

使用ng serve

您现在应该可以开始调试您的应用（使用F5）并且所有断点都可以正常工作。

Answer 2

这似乎与这个问题有关：

Angular CLI 1.7.0 and Visual Studio Code - can't set breakpoints

解决方案是安装较旧版本的angular cli。

使用F5在Angular项目中使用vscode进行TypeScript调试。没有破坏或在错误的地方

2 个答案: