How to Inspect Event Listeners in Firefox

How to Inspect Event Listeners in Firefox

ยท

2 min read

A Note on the Series:

Fast Fridays ๐ŸŽ is a series where you will find fast, short and sweet tips/hacks that you may or may not be aware of. I will try to provide these (fairly) regularly on Fridays.

Firefox provides a simple and easy way to be able to inspect DOM events from the developer tools. In this article, I will describe how to view events in Firefox's dev tools along with the information you can gather from this capability.

Examine Events

First, open up the developer tools in Firefox and switch to the "Inspector" tab. From there you will see the HTML and next to the relevant elements you will see an "event" tag that you can click on to reveal a popup of information.

Screen Shot 2020-10-08 at 11.23.34 PM.png

Each row within the popup contains the following information:

  1. A dropdown arrow with the name of the event type. You can use this to toggle open the row to reveal the corresponding event listener code.
  2. A right-pointing arrow that will take you to the code in the debugger tab.
  3. The file name and line number where the event is defined in the code.
  4. If the event bubbles, a "Bubbling" tag.
  5. A tag indicating the system that defines the event. This will be one of three values: "jQuery", "DOM2", or "React."

inspector_event_handlers.png

Image from MDN Docs

El Fin ๐Ÿ‘‹๐Ÿฝ

Inspecting event listeners is a nice feature to have when debugging code or just wanting to know which events are bound to what elements. I hope this proves to be helpful the next time you need to debug some code.

Thanks for reading and happy coding!

Resources

[Photo by John Schnobrich on Unsplash]