无法在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版本。 如果您知道它是一个错误，您应该将其提交给相应的错误跟踪系统。