不能在 Angular 构造函数或 OnInit 中放置断点

Posted 2023-03-07

【中文标题】不能在 Angular 构造函数或 OnInit 中放置断点

【英文标题】：Can't put a breakpoint in Angular constructor or OnInit

【发布时间】：2017-11-21 00:17:25

【问题描述】：

我有一个 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

...
]

注意，按钮单击处理程序按预期中断。

【问题讨论】：

你在使用 TypeScript 吗？更好地添加标签以获得更好的帮助。同时，检查map文件，如果是TS且缺少map文件，调试器无法判断该行在JS文件中的哪个位置...尝试重建JS文件。

感谢您的建议 - 添加了 typescript 标签。 map 文件在那里，我可以完美地看到源代码（这就是我可以首先放置断点的方式）。如果我在页面加载之后执行的代码中放置一个断点，它可以正常工作

作为一种解决方法，您也可以只写debugger;到代码本身

哎呀！完全忘记了这一点。是的，调试器坏了！谢谢。

【参考方案1】：

有时它会丢失断点，因为调试器不知道源代码的位置，或者代码的执行速度比调试器想象的断点快。在这种情况下，代码是不可调试的。

但是，如果您能理解 javascript，则可以直接对转译的 javascript 代码设置断点。 Webpack 有时会在地图文件中写入错误的源路径，因此您很难修复它们。但是这个问题从原始问题传出。您需要做的是尝试修复错误的不同浏览器或 Webpack 版本。如果您知道这是一个错误，您应该将其提交给相应的错误跟踪系统。

【讨论】：

它感觉正如你所说，代码的执行速度比调试器快。至少网页在 F12 中的源代码之前显示。 Webpack 将所有内容保存在内存中；没有我可以分析的真正的物理 javascript 文件。我将尝试构建一个基于 Angular 英雄的最小项目，我可以分享...

我不需要它，每个 Angular 开发人员都知道调试器在某些情况下不起作用，但没有人说出原因。该项目可能取决于它运行的环境，并且结果成为该环境的本地环境。