如何在 Chrome 的 Elements 选项卡中设置事件监听器断点？答案

【问题标题】：How to set event listener breakpoints in Chrome's Elements tab?如何在 Chrome 的 Elements 选项卡中设置事件监听器断点？
【发布时间】：2013-04-02 11:27:33
【问题描述】：

我正在努力在动态生成的 DOM 元素中设置断点，其中不同的事件处理程序也与 Javascript 绑定。这基本上意味着我有一个漂亮的 DOM 结构，它不是最初收到的 HTTP 响应的一部分，它纯粹是在客户端构建的。

现在的问题是 Chrome 的 Elements 选项卡只允许我设置断点

子树修改或
属性修改或
节点移除

是否可以在动态创建的 DOM 元素的动态创建的事件监听器中以某种方式设置断点？（见附图。我想在 listenerbody 中设置断点）

请注意，我也不能使用“源/脚本”选项卡，因为它只显示最初收到的静态 HTTP 内容响应。而且我也不能在“Event Listeners”手风琴中引用的代码中设置断点，因为它只会在事件监听器被连接时向我显示，而不是在它被触发时显示！

有什么想法吗？

【问题讨论】：

标签： javascript debugging google-chrome google-chrome-devtools

【解决方案1】：

Sources -> Event Listener Breakpoints 包含一堆复选框，可以选中这些复选框以在触发事件的事件侦听器时激活断点。

【讨论】：

感谢您的想法，但问题是由于我之前描述的原因，我无法使用源选项卡。还有其他想法吗？
@CaptainFogetti 此功能无需任何资源即可使用。试试看：在控制台输入document.onclick=function(){};，按照我回答的步骤，点击文档。
谢谢！那太棒了！我不知道您可以在没有任何来源的情况下设置这些侦听器断点... ^_^
我可以让它在某些事件上工作，但我觉得它在其他事件上不起作用。例如，我知道有代码在操作 DOM，但在所有 DOM Mutation 事件中触发的唯一事件（我已经检查了它们）是DOMContentLoaded。没有看到DOMNodeInserted火。
@kalenjordan“子树修改中断”在向其任何后代添加/删除节点时触发断点。它似乎适合你的工作。