使用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。