Chrome DevTools查看元素事件总指向zone.js，如何找到Angular应用真实代码？

完全不需要依赖第三方工具，Chrome DevTools原生就支持该需求，按以下步骤操作即可：

DevTools原生配置调整 #

• 选中目标元素：打开Elements面板，点击你需要查看事件绑定的页面元素
• 过滤框架封装事件：在右侧Event Listeners标签栏，取消勾选Ancestors和Framework listeners两个复选框
  • 取消Ancestors可以排除父级元素冒泡传递的无关事件，仅展示当前元素直接绑定的事件
  • 取消Framework listeners会自动剥离Angular/zone.js对事件的封装层，直接展示你业务代码中真实绑定的事件回调，点击跳转也不会进入zone.js文件
• 配置忽略列表彻底跳过框架文件：如果上述操作后还是偶发跳转，可以进入DevToolsSettings > Ignore List，添加zone.js、zone-evergreen.js两个文件名到忽略规则，后续所有调试断点、调用栈跳转都会自动跳过这部分框架代码，直接定位到业务逻辑位置

额外调试技巧 #

• 临时监控元素所有事件可以在控制台执行monitorEvents(你的DOM元素对象)，触发的所有事件会实时打印在控制台，点击对应调用栈即可直接跳转逻辑位置
• 针对@HostListener、模板绑定的事件，直接在业务代码的回调函数首行添加断点，触发事件时会直接命中，不会进入zone.js的包装逻辑

扩展工具选项 #

如果需要更直观的组件维度事件查询，可以安装Angular DevTools扩展，打开扩展的Components面板选中对应组件，就能直接看到该组件所有绑定的事件和回调位置，无需手动过滤框架封装内容。

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