/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(157) CSS Grid Debugging Render performance profile example (159)

Chrome DevTools: View and remove JavaScript event listeners

12th September 2017
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.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.