How to Inspect Event Listeners in Firefox

Welcome to my blog ππ½
I'm a Front-End Developer with a passion for learning!
I write about Programming π©π½βπ» and Productivity Tips β
Search for a command to run...

Welcome to my blog ππ½
I'm a Front-End Developer with a passion for learning!
I write about Programming π©π½βπ» and Productivity Tips β
No comments yet. Be the first to comment.
In this series, 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.
test.only() and test.skip()
Although my experience is primarily with front-end development, my current job is affording me the opportunity to do more full-stack work. Naturally, this meant that I needed to explore the different database GUIs available on the market. Here is a l...

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. In this Fast Friday tip, I'll explain how to crea...

Over the past year, Iβve started incorporating a Git GUI into my workflow. I still reach for the terminal about 90% of the time, but Iβve found that a GUI can really shine when it comes to things like viewing diffs, checking stashes, or resolving mer...

Simplifying Branch Management with Git Worktree

With all the AI tools popping up these days, I figured I'd try out some speech-to-text software in an attempt to boost my productivity. I've been hearing a lot about βdeveloping at the speed of thoughtβ, so here's a list of the top speech-to-text sof...

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

Each row within the popup contains the following information:

Image from MDN Docs
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!
[Photo by John Schnobrich on Unsplash]