無法在Angular構造函數或OnInit中放置斷點

Question

我有一個Angular應用程序，我試圖在Chrome或IE中的F12工具中設置斷點。 我有簡單的測試用例：

export class LoginComponent implements OnInit {
    message: string;

    constructor(private router: Router) { 
        console.log("Login Constructor");
    }

    ngOnInit() {
        console.log("Login OnInit");
    }
}

我在控制台中看到日志輸出，但設置斷點不起作用。 我認為它幾天前停止工作（不確定它是某些庫，Windows或兩種瀏覽器的升級）。 甚至不知道從哪里開始尋找。 該項目是使用webpack構建的，我通過路由獲取此組件：

const appRoutes: Routes = [
{
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
},
{
    path: '/login',
    component: LoginComponent
}
...
]

請注意，按鈕單擊處理程序按預期中斷。

Answer 1

有時缺少斷點，因為調試器不知道源代碼的位置，或者代碼的執行速度比調試器想象的斷點快。 在這種情況下，代碼不可調試。

但是，如果您能夠理解javascript，則可以將斷點直接設置為透明的javascript代碼。 Webpack有時會在映射文件中寫入錯誤的路徑，因此修復它們會遇到很多麻煩。 但這個問題從原來的問題傳出。 你要做的是嘗試修復錯誤的不同瀏覽器或Webpack版本。 如果您知道它是一個錯誤，您應該將其提交給相應的錯誤跟蹤系統。