Event Listeners outlines every element that has an event listener, coloured by kind — click, hover, scroll, touch, keyboard and form — shows where each handler came from, and flashes elements as the DOM changes.
Working out why something reacts — or does not — usually starts with a question the page will not answer: is there a click handler on this element at all? Which element actually owns the hover behaviour? What is listening to scroll and making the page stutter? Browser DevTools can list the listeners of one element at a time, if you already know which element to select.
This tool answers the question for the whole page at once. Every element with a listener gets an outline in the colour of its kind — click, hover, scroll, touch and drag, keyboard, or form and focus — and hovering one shows the exact events and where each came from: an inline attribute, an on-property, a React or Vue handler, jQuery, or addEventListener. Category tiles switch each kind on and off, and the list underneath names every element, so one click scrolls you to it.
Frameworks are handled properly. React attaches its listeners to the root and dispatches events internally, which would make the whole app look clickable; the tool sets those root registrations aside and shows the React handlers on the elements that declare them. The quick scan needs no reload and covers inline handlers, React, Vue and jQuery. Listeners added with plain addEventListener before the tool opened can only be seen from the start of a page load, so Reload & record reloads the page once with recording on — the tool then reopens by itself with every listener included, page-level ones on window and document too.
The second tab watches the DOM itself. Every added or removed node, attribute change and text change flashes on the page, the counters show mutations per second, and a list ranks the elements that change most, with the attributes involved. A steady stream while nobody touches the page usually means a timer, a JavaScript-driven animation or a framework re-rendering more than it should — exactly the things that drain batteries and make pages stutter.
Elements with click, hover, scroll, touch, keyboard and form listeners are outlined in their own colour, with tiles to show or hide each kind.
Inline attributes, on-properties, React and Vue handlers, jQuery events and addEventListener calls, labelled on every element.
React's root-level listeners are set aside, and its handlers are shown on the elements that declare them rather than on the whole app.
Reload & record catches every addEventListener call from the start of a page load, including window and document listeners, for that one load only.
Added and removed nodes, attribute changes and text changes flash on the page, with a mutations-per-second counter.
A ranked list of the elements that change most, with the attributes involved, points straight at runaway re-renders.
See at a glance whether a button actually has a listener, or whether the handler sits on a wrapper element instead.
Find every element listening to scroll, wheel or touchmove, including listeners on window and document.
Check which controls respond to keyboard events and which only respond to the mouse.
Watch the mutations counter while the page is idle; elements that keep changing point to a timer or a framework doing extra work.
Hover around an unfamiliar site to see which parts are interactive and which framework wired them up.
Click the Event Listeners icon in the DevSuite Pro dock. A quick scan runs immediately and outlines every element it finds.
Hover any outlined element to see its events and their sources. Use the category tiles to show only click, hover or scroll listeners.
Press Reload & record to reload the page once with recording on. The tool reopens on its own and now includes every addEventListener call.
Click a row in the list to scroll the page to that element and flash it. Copy report gives you the full list as text.
Open the DOM mutations tab and use the page. Changing elements flash, and the busiest ones rise to the top of the list.
Install DevSuite Pro for free and unlock 74+ developer tools for your browser.
