Event Lens

What is Event Lens?

Event Lens is a Chrome DevTools extension that makes the event flow in modern JavaScript apps visible.

The problem

Stock DevTools shows you:

• Network calls in the Network tab.
• Errors in the Console.
• Code in Sources.

But it does not show you the event flow:

• DOM events (click, scroll, etc.).
• Custom event buses (EventEmitter, pub/sub).
• postMessage bridges.
• BroadcastChannel traffic.
• Which API calls each event triggered.

The solution

Event Lens automatically captures every event, shows the full payload, lists subscribers, and lets you replay.

An event happens on the page (user click, postMessage, ...)
        |
   Event Lens captures it
        |
Shown in the DevTools panel
        |
Payload, subscribers, chains visible
        |
Edit, replay, debug, test

Installation

1. Open Event Lens on the Chrome Web Store.
2. Click Add to Chrome.
3. Confirm permissions when prompted.

That's it. Open any page, open DevTools (F12), and you'll see the Event Lens tab.

5-Minute Quick Start

1. Capture events

Go to a page and interact with it (click a button, fill a form, scroll). Event Lens captures automatically — you don't have to write any code.

2. Inspect an event

Click any row in the panel:

Event Lens Panel
  All (1,243 events)
    CustomEvent:cart:item-added   [DRIFT]   12 B   demo.html:42   14:03:21
    PubSub:user:login             [DUP x2]  45 B   app.js:128     14:03:22
    ...

The detail panel shows the payload, subscribers, and delivery status:

Payload
  {
    "itemId": "prod-123",
    "quantity": 1,
    "price": 99.99
  }

Subscribers
  updateCart()       2.3ms
  trackAnalytics()   1.1ms
  syncInventory()    ERROR

3. Edit the payload and replay

Click Edit, change the payload, then Replay Edited to fire it on the page with the new value:

{
  "itemId": "prod-456",
  "quantity": 5,
  "price": 99.99
}

The UI updates against the new payload.

4. Apply a filter

Type cart: in the search box and hit Enter. Only cart events remain.

5. Record a session

Replay tab → Start recording → interact with the page → Export → download the JSON.

Core Concepts

What is an event?

An event signals that something happened in your app:

• DOM event — button.click().
• CustomEvent — dispatchEvent(new CustomEvent('user:login')).
• Event bus — eventEmitter.emit('message:received').
• postMessage — window.postMessage({ type: 'sync' }).
• BroadcastChannel — channel.postMessage({ sync: true }).

What is capture?

Event Lens records when, where, and with what payload an event was fired. You don't have to instrument anything — capture happens automatically.

What is a payload?

The data carried by the event:

dispatchEvent(new CustomEvent('product:viewed', {
  detail: {
    productId: 123,
    timestamp: Date.now()
  }
}));

In Event Lens:

{
  "productId": 123,
  "timestamp": 1714756800000
}

What is a subscriber?

A handler listening for the event:

document.addEventListener('product:viewed', (e) => {
  analytics.track('product_view', e.detail);
});

When the event fires, every subscriber runs.

What is a chain?

Events can trigger each other:

user:click
   |
product:viewed (listener ran)
   |
analytics:track (new event)
   |
api:request (network call)

Event Lens visualizes the chain so you can follow cause and effect.

Panel Layout

+------------------------------------------------+
| Event Lens                  Settings  Export   |  Header
+------------------------------------------------+
| All | PubSub | postMessage | CustomEvent | ... |  Tabs
+------------------------------------------------+
| Filter events...                               |  Search
+------------------------------------------------+
|                                                |
|  cart:item-added       [DRIFT]    12 B         |
|  user:login            [DUP x2]   45 B         |  Event list
|  api:request-sent      [SLOW]     156 B        |
|                                                |
| ---------------------------------------------- |
| Payload: { ... }                               |  Detail panel
| Delivery: ...                                  |
| [Replay] [Edit]                                |
+------------------------------------------------+

Tabs

Tab	Shows
All	Every event
PubSub	Event-bus events (emit/on)
postMessage	window.postMessage calls
CustomEvent	dispatchEvent calls
BroadcastChannel	Cross-tab messages
Warnings	Schema drift, slow subscribers, etc.
Leaks	Memory leaks
Replay	Replay queue and history
Network	Correlated API calls
Clients	Subscribers, aggregated

Common Badges

Badge	Meaning
DRIFT	Payload shape changed (schema mismatch)
-KEYS	Keys present in earlier payloads are missing
DUP x3	The same event fired 3 times with the same payload
SLOW	A handler took 50 ms+
OVER BUDGET	A performance budget was exceeded
WARNING	Other warning types

Important Notes

What Event Lens does

• Automatic event capture — no code changes needed.
• Full payload viewing.
• Event chain tracing.
• Slow-subscriber detection.
• Memory-leak detection.
• Event replay.
• Session record and playback.

What Event Lens does not do

• Trace frontend component renders (use React DevTools).
• Show Redux state changes (use Redux DevTools).
• Modify network requests (it is not a network interceptor).
• Run in production (it is a dev tool).

Next Steps

• Learn every feature.
• Guides — step-by-step walkthroughs for each feature.
• FAQ.
• Privacy policy.