Use Chrome’s Developer Tools to check for event listeners

February 7th, 2013

I don’t know how long this feature has been in the Dev Tools but I know it’s something that I could have used a few times over the years. When you inspect an element hidden down in the corner underneath the “Styles”, “Properties”, “DOM Breakpoints” among others, is the “Event Listeners” panel.

dev-tools-1

Ok, that’s pretty interesting but why should you care? Well, I’ve had a couple of situations where this could really help out. First, I’m sure everyone that’s written JavaScript has assigned a click event listener to an element and when they clicked it, nothing happened. So they went over their code trying to figure out why the code wasn’t firing when the element was clicked only to figure out that they’d made a spelling mistake and hadn’t actually assigned the event listener to the element. Now you can just check the element right away to see if there’s actually an event listener assigned to it.

Second, there’s be a couple of times where I’ve added a click event to an element and nothing happens or something other than what I wanted to happen happened. Turns out it had another click event assigned to it and that one was overriding it. Something that took me forever to figure out would have taken me five minutes if I’d checked it using the Dev Tools first.

Again, I’m not sure if I’m late to the party on this but I didn’t know about it until I watched Secrets of the Chrome Developer Tools a few days ago. But this is definitely something that every front-end developer should have in his or her tool kit.

Plus, you can use it to take a look at all the event listeners jQuery adds when you assign a click event to an element.

dev-tools-2

Leave a Reply

Your email address will not be published. Required fields are marked *