Search code examples
javascriptdom-eventsgoogle-chrome-devtools

Chrome DevTools: How to see attached event listeners for a DOM element

I am switching from debugging JS in Firefox to Chrome's development tools.

One thing that I am missing is this:

chrome-dev-tool-are-missing-even-handler-preview

Firefox's Inspector tab shows an "[event]" label, indicating that there is a custom event handler attached. I think this preview is very handy.

But in Chrome, I need to explicitly search for the event handler.

Is there a way to enable this feature (see event handlers in the tree) in Chrome, too?

Solution

  • The feature you are looking for is available in google chrome dev tools

    enter image description here

    I have taken, the jobs links in stack overflow page itself, it has a click event handler, to see the event handler, select the Event Listeners tab in the right part(hilighted in Red) there is a possibility that it might be hiddent by >> , click to expand,

    If the ancestor checkbox is checked please uncheck this, then you will get the clear view of for which event (e.g click) , on what element (e.g anchor tag), and on right side on which file with line number, click it to navigate there.

    Hope this is what you are looking for.