angular - 无法在 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，则可以直接将断点设置为 transplitted javascript 代码。 Webpack 有时会在映射文件中写入错误的源路径，因此您很难修复它们。但是这个问题从原始问题中传出。您需要做的是尝试修复错误的不同浏览器或 Webpack 版本。如果您知道这是一个错误，则应将其提交给相应的错误跟踪系统。