How to Replay Events

Replaying with the Original Payload

Re-fire an event exactly as it was first captured:

1. Click the event in the list.
2. Click Replay in the detail panel.
3. Confirm the action (Event Lens guards against accidental triggers).
4. The event fires on the page, subscribers run, the UI updates as if it had happened naturally.

Use this to:

• Verify a handler still works after a code change.
• Re-trigger a flow without manually clicking through the UI again.
• Reproduce timing-sensitive bugs.

Replaying with an Edited Payload

Change the payload before re-firing:

1. Click the event in the list, open its details.
2. Click the Edit icon next to the payload.
3. Modify the JSON:

   {
     "itemId": "prod-456",
     "quantity": 100
   }

4. Save — the changes are kept on the captured event.
5. Replay Edited — the event fires with the new payload (no confirmation; editing is itself the intent).

Typical use cases

• Edge cases — negative numbers, empty strings, null.
• Different roles — role: 'admin' | 'user' | 'guest'.
• Limit testing — quantity: 1000, price: -99999.
• Integration combinations — different feature flag mixes.

Replay Queue

Replay several events in sequence:

1. Click + Queue on each event you want to include.
2. Open the Replay tab to see the queue.
3. Order events by drag, set the delay between each (default 500 ms).
4. Click Play All — events fire one after another with the configured delay.

Useful for:

• Simulating a user flow (login → product:viewed → cart:item-added → checkout).
• Stress-testing handlers with many events in a short window.
• Reproducing race conditions.

Setting Breakpoints

Pause the debugger when an event fires, before any subscriber runs:

1. Click the event in the list.
2. Toggle the Breakpoint icon on the row — it turns red.
3. Trigger the event on the page.
4. The debugger pauses; Sources opens.
5. Inspect state in the Console:

   > state
   > state.cart
   > window.eventBus

6. Resume with F8 (continue) or F10 (step over).

Use breakpoints when you need to inspect what the page looked like at the moment of the event — before any handler mutates state.

Tips & Tricks

• Save edited payloads — once edited, the new payload sticks on that captured event for the session, ready to re-replay.
• Combine with Network tab — replay an event, watch which API call follows.
• Stack with breakpoints — set a breakpoint AND replay to inspect every subscriber path.
• Stop the queue — close DevTools or hit Stop in the Replay tab.

See Also

• Capturing Events — open Event Lens and inspect captured events.
• Recording Sessions — record full user flows for replay later.
• Network Correlation — see which API calls each event triggers.