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