Chrome DevTools: View and remove JavaScript event listeners
Last updated: 12th September 2017You can view JavaScript event listeners in the Events Listeners pane within the Elements Panel. You see all registered event listeners on the inspected element, for example click
, blur
, mousedown
etc.
If you click 'Remove', you remove the registered event listener. This is useful for quickly figuring out whether a JS event listener is the cause of an unexpected bug.
You can also view the JavaScript handler function.
If your code uses a JavaScript framework/library like jQuery to register the handler, DevTools displays the framework/library source code - this is not always useful. As a solution, if you check the 'Framework Event Listeners' checkbox, DevTools can resolve the original code (e.g. your source code).
Note: I have only tested the 'Framework Event Listeners' feature with jQuery.