Framework Event Listeners

View and Remove JS Event Listeners in @ChromiumDev Tools:  by @umaar #JavaScript #ReactJS

  • 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 , , etc.
  • This is useful for quickly figuring out whether a JS event listener is the cause of an unexpected bug.
  • 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.

Chrome DevTools – View and remove JavaScript event listeners – Subscribe to Dev Tips to get these in your inbox

@HappyFunCorp: View and Remove JS Event Listeners in @ChromiumDev Tools: by @umaar #JavaScript #ReactJS

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.

Framework Event Listeners