How to Capture Events

Opening Event Lens

1. Open your browser and navigate to any web app.
2. Press F12 (Windows/Linux) or Cmd+Option+I (Mac) to open DevTools.
3. Click the Event Lens tab at the top of DevTools.
4. Interact with the page — click, scroll, submit a form. Captured events appear in the list.

Understanding the Event List

Each row represents one captured event with key information:

• Name — the event identifier (e.g. cart:item-added, user:login).
• Type — CustomEvent, postMessage, BroadcastChannel, or PubSub.
• Payload size — bytes of the serialized payload.
• Source — file and line where the event was dispatched.
• Time — when the event fired.
• Badges — DRIFT, DUP, SLOW, OVER BUDGET when applicable.

Searching Events

Quick search

Type in the search box at the top to filter by name, source, or payload value:

• Search by name — cart, user:login.
• Search by source — app.js, analytics.js.
• Search by payload fragment — userId, prod-123.

Results update instantly.

Conditional filters

When plain search isn't enough:

1. Click + Add Filter at the top of the panel.
2. Add a rule:

   Field:    Event name
   Operator: contains
   Value:    cart

3. Stack more rules:
   • Payload.itemId = "123".
   • Source contains "app.js".
   • Warning type is "SLOW".
4. Apply — only events that match every rule stay visible.

Examples

Query	Result
cart	cart:item-added, cart:total-updated, etc.
user	user:login, user:logout, user:profile-updated
api	network requests
error	events flagged with errors

Inspecting Event Details

Click any event in the list to open its detail panel:

cart:item-added
  Payload
  Chain
  Delivery
  [Replay]  [Edit]

• Payload — full JSON, expandable, copyable.
• Chain — which event triggered this, and which events this triggered.
• Delivery — every subscriber that ran, with per-subscriber duration.

Sample output

Payload
  {
    "itemId": "prod-123",
    "quantity": 2,
    "price": 99.99,
    "timestamp": 1714756860000
  }

Delivery
  updateCartUI()           2.3ms
  persistToLocalStorage()  1.8ms
  triggerNotification()    ERROR: timeout

Chain
  product:viewed     (triggered this event)
  api:cart-update    (this event triggered)

Tabs Reference

Tab	What it shows
All	Every captured event
PubSub	Event-bus events (emit/on)
postMessage	window.postMessage calls
CustomEvent	dispatchEvent calls
BroadcastChannel	Cross-tab messages
Warnings	Events flagged with drift, duplicates, slow handlers
Network	Correlated fetch / XHR requests

Tips & Tricks

• Find auth events — search for auth, login, session, token.
• Spot duplicates — sort by name and look for DUP x2 badges.
• Identify analytics — filter by source analytics.js or similar.
• Monitor schema drift — keep the Warnings tab open during development.

See Also

• Replaying Events — re-fire captured events with original or modified payloads.
• Network Correlation — tie events to API requests and event chains.
• Performance & Leaks — find memory leaks and budget violations.