Dev Tips

DevTools: View and remove JavaScript event listeners

You 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.