使用F5在Angular项目中调试vscode TypeScript。没有断裂或在错误的位置

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

环境：

• 最新vscode（1.21.1）
• 已安装最新的Chrome调试器扩展
• 最新npm/角度CLI
• 最新镀铬（65.0.33…）

使用CLI和

ng new生成的项目

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

这是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=“其他字符串”

在终端正常启动
ng serve
单击F5-Chrome将打开并显示主屏幕

问题1:铬合金根本不刹车

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

问题2:断线发生在错误线路上

有没有什么方法可以使这项工作正常进行，这样我就可以使用VSCode轻松地进行设置和调试？
很难说为什么您的设置会出现异常行为。我还使用VSCode调试Angular应用程序，我的设置工作得很好，我将在这里分享它，希望它能有所帮助


确保您已安装
修改您的
launch.json
如下所示


{
“版本”：“0.2.0”，
“配置”：[
{
“类型”：“铬”，
“请求”：“启动”，
“名称”：“启动Chrome”，
“url”：”http://localhost:4200",
“webRoot”：“${workspaceRoot}”，
“源地图”：正确，
“userDataDir”：“${workspaceRoot}/.vscode/chrome”，
“runtimeArgs”：[
“--禁用会话崩溃气泡”
]
},
{
“名称”：“附加铬”，
“类型”：“铬”，
“请求”：“附上”，
“url”：”http://localhost:4200",
“端口”：9222，
“webRoot”：“${workspaceRoot}”，
“源地图”：真
}
]
}
这似乎与这个问题有关：


解决方案是安装angular cli的旧版本。
谢谢您的回答！你能解释一下第二个“附加Chrome”配置的作用吗？我确实做了这个改变——同样的事情。第一次跑动时，刹车点没击中。如果我“刷新”-与我设置的内容相比，在某个无效/随机行上中断。最新安装的Chrome调试器扩展。。。看看这个答案是否有帮助：这个答案没有帮助。在我的例子中，它在技术上是“工作”的，因为一旦它断开，我就可以通过，等等。看起来问题在于“映射”中的断点线没有被正确检查/应用。您在哪个操作系统上？我在Mac电脑上，也有同样的行为。它第一次起作用，但是断点开始离开。重新启动chrome和ng serve似乎效果不太令人满意。它可能在Windows上重复我可以设置断点，它们只是没有被正确命中和移动。这也是另一个问题中的问题，即使标题说无法设置，那里的海报可以设置它们，但它们没有被正确命中。换成和旧的角度cli也对我有用。
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";
  }
}