There is no filter button anymore in Chrome Developer Tools/Elements/Event Listeners. The Event Listeners panel will show only the events of the element you select in the Elements panel. So the events attached to child nodes will not show. If I select the body element, no events will populate the Event Listeners tab.
I'm using Chrome version 73.0.3683.86.
Also, I tried in the console to getEventListeners(document) and getEventListeners(document.body).
The result is an empty object.
What am I doing wrong?
Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element. If the event will fire, then you will get a breakpoint in the debugger.
On the page, right-click the element you want to debug event listeners for, then click Inspect Element. In chromium-based browsers like MS Edge and Google Chrome, click the Event Listeners tab in Developer Tools. There, you'll see a list of all of the events being listened to on that element.
You can also press Ctrl + Shift + C on your keyboard to open the developer tools. In the top-left section of the developer tools, make sure Elements (A) is selected at the top. In the condensed code under the Elements header, find the <script> tag containing a link to a . js file (B).
The monitorEvents
has just worked for me. Simply run monitorEvents(object [, events])
in your console, e.g. monitorEvents(document.body, "dragenter")
or for all events monitorEvents(document.body)
.
To stop it run unmonitorEvents(document.body)
.
From here: https://developers.google.com/web/updates/2015/05/quickly-monitor-events-from-the-console-panel
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With