如何在 Angular 应用程序中找到从 Chrome 开发工具调用的 JS 函数？答案

【问题标题】：How to find the JS function being called from Chrome Dev Tools in Angular application?如何在 Angular 应用程序中找到从 Chrome 开发工具调用的 JS 函数？
【发布时间】：2018-11-24 21:34:58
【问题描述】：

我正在尝试在用于滚动页面的 javascript 中查找 Angular 应用程序中的缺陷。人点击链接，页面滚动。简单的。

唉，我不知道当用户单击链接时实际调用了哪些函数，并且鉴于这个应用程序包含几十个（以及几十个）单独的文件，我很难找到发生了什么。

我已经阅读了有关使用断点并通过 devtools 中的 SOURCES 选项卡设置它们的信息。但是，无论我在那里打开了许多 JS 文件中的哪一个，我都没有得到任何断点选项来检查。

有没有办法在 Chrome 的 Devtools 中查看页面上的特定事件触发了什么 JS？

【问题讨论】：

您可以通过单击要暂停之前的行左侧的行号来设置断点。它会生成一个蓝色的小箭头。
@shiftweave 我不知道我在寻找什么函数，更不用说它在哪个 JS 文件中或者它在哪个行号。这些都不是我的代码。
Chrome 开发工具中有一个事件侦听器选项卡，其中列出了附加到各种元素的所有事件侦听器。请注意，虽然有些可能链接到设置监听器的库（即，如果使用 jQuery 将链接到 jQuery 子系统）

标签： javascript angularjs debugging google-chrome-devtools

【解决方案1】：

转到Sources 选项卡。
展开Event Listener Breakpoints
展开Control，勾选scroll复选框。
滚动页面。

Javascript 运行时将在绑定到页面滚动的事件侦听器上停止，并且位置将显示在Sources 选项卡下的主窗口中。如果它是库文件（在你的情况下是 Angular 文件），右键单击该文件和 Blackbox script。再次滚动页面；）

【讨论】：