javascript 如何在 Chrome 的 Elements 选项卡中设置事件侦听器断点?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15928950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 02:38:47  来源:igfitidea点击:

How to set event listener breakpoints in Chrome's Elements tab?

javascriptdebugginggoogle-chromegoogle-chrome-devtools

提问by Captain Fogetti

I am struggling with setting breakpoints in dynamically generated DOM elements, where different event handlers are also binded from Javascript. This basically means that I have a nice looking DOM structure which is not part of the initially received HTTP response, it is purely built on client side.

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

Now the problem is that Chrome's Elements tab only allows me to set breakpoints for

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

  • Subtree modification OR
  • Attribute modification OR
  • Node removal
  • 子树修改 OR
  • 属性修改 OR
  • 节点移除

Is it possible to set a breakpoint in the dynamically created DOM element's dynamically created event listener somehow? (See image attached. I want to set the breakpoint into the listenerbody)

是否可以以某种方式在动态创建的 DOM 元素的动态创建的事件侦听器中设置断点?(见附图。我想将断点设置到 listenerbody 中)

enter image description here

在此处输入图片说明

Note that I can't use 'Sources/Scripts' tab either, since it only shows me the initially received static HTTP content response. And I can't set breakpoint either in the code referenced in the 'Event Listeners' accordion, since it will only show me the event listener when it is getting attached not when it is getting fired!

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

Any ideas?

有任何想法吗?

回答by Rob W

Sources -> Event Listener Breakpoints contains a bunch of checkboxes which can be checked to activate a breakpoint when an event listener for the event is triggered.

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