I want DevTools to display event listener types as badges on elements in the Elements panel
Submitted by Anonymous
Permalink https://webwewant.fyi/wants/193f8239-0bf8-43ec-9ee7-7153ac43527a/
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:
- Surface event wiring at a glance: no need to click through each element and switch panels to discover whether it has listeners.
- Speed up debugging: identifying which element handles a particular interaction becomes a visual scan rather than a multi-step investigation.
- Complement existing tooling: the Event Listeners panel already provides the full detail; the badge is just a discoverable shortcut to it.
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.
- Votes
- 0
What are votes for and how are they tallied?