I want DevTools to display event listener types as badges on elements in the Elements panel

Submitted by Anonymous

This idea is currently being discussed.

I want browser DevTools to display event listener types as inline badges next to elements in the Elements panel — similar to how flex and grid badges already indicate CSS layout modes — so I can instantly see which events are attached to any element without switching to the Event Listeners pane.

DevTools already shows helpful badges like flex and grid directly on elements in the Elements panel, providing a quick visual cue about the element's CSS layout context. A similar feature for event listeners would dramatically speed up debugging interactive UIs.

When an element has one or more event listeners attached, the Elements panel would display small badges indicating the event type(s) — for example click, mouseover, keydown, or submit. Clicking a badge would navigate directly to the corresponding listener in the Event Listeners panel, making it trivial to jump to the relevant handler code.

This feature would:

Firefox already shows an ev badge on elements with event listeners, but it does not display the specific event types inline. Full type badges — matching the visual style of the existing layout badges — would make event discoverability first-class in the Elements panel across all browsers.

Tagged
DevTools Dom
Votes
0
What are votes for and how are they tallied?