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

Question

我读到了许多相关的问题，其中调试不起作用。 就我而言，它有效，但是“很奇怪”。 我在一行代码中设置了断点，但它在完全不同的行中断了。 我觉得它与源地图有关，但不确定是什么。

环境：

• 最新的vscode（1.21.1）
• 安装了最新的Chrome调试器扩展
• 最新的npm /角度CLI
• 最新版Chrome（65.0.33 ...）

使用CLI和ng new生成的项目

为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调试器扩展程序
• 修改您的launch.json如下所示

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

• 用ng serve您的角度应用ng serve

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

Answer 2

这似乎与以下问题有关：

Angular CLI 1.7.0和Visual Studio Code-无法设置断点

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