如何在Chrome中查找Angular按钮的onClick关联TypeScript函数？

一、定位按钮点击的TS函数（Chrome调试步骤） #

方法1：通过Event Listeners面板直接找绑定函数 #

• 打开Chrome开发者工具（按F12或右键点击按钮选「检查」），在Elements标签定位到目标按钮。
• 在右侧面板找到Event Listeners，展开click事件：
  • 列表里会显示所有绑定的点击监听函数，点击函数名称旁的链接（可能是混淆后的短名称，比如n、t），会直接跳转到Sources标签对应的代码位置。
  • 如果项目开启了Source Maps，会自动映射到原始的TypeScript文件，能直接看到未压缩的代码逻辑。

方法2：断点调试，点击按钮自动断到函数 #

• 在Elements标签右键点击目标按钮，选择Break on → EventListener → click。
• 点击页面上的按钮，浏览器会自动在触发点击的函数处断点，查看右侧Call Stack调用栈，就能找到对应的TS函数（调用栈里带.component.ts的就是组件里的逻辑）。

方法3：关联Angular组件找逻辑 #

• 按钮带mat-button是Angular Material组件，在Elements标签里往上找包含_nghost属性的父元素，这就是按钮所属的组件容器。
• 记住组件的类名或选择器（比如从组件的class属性找），在项目里搜索对应的.component.ts文件，查找(click)绑定的方法（比如模板里的(click)="handleBtnClick()"），或者用@HostListener('click')装饰的函数。

二、解决_ngcontent属性搜不到的问题 #

• _ngcontent-uad-c275这类属性是Angular编译时自动生成的样式隔离标记，不会出现在你写的原始HTML模板里，所以在项目中搜索不到是正常现象。
• 不用纠结这些属性，直接通过组件结构、按钮文本、类名等关键词，去查找对应的组件模板和TS文件即可。

额外小技巧 #

• 在控制台输入getEventListeners($0)（$0代表当前Elements标签选中的元素），可以直接打印该元素的所有事件监听，点击事件的函数会包含在click数组里。
• 开发环境下，Angular默认开启Source Maps，在Sources标签的webpack:///src目录下，能直接查看项目原始的TS文件，方便搜索和调试。

内容的提问来源于stack exchange，提问作者Boommeister