Skip to main content
Version: 0.1.0

Network Correlation & Event Chains

Inspecting Network Correlation​

Find out which fetch / XHR requests an event triggered.

Steps​

  1. Go to the Network tab in Event Lens (separate from Chrome's own Network panel).
  2. Find your event on the timeline (e.g. cart:item-added).
  3. See the correlated requests: 
    cart:item-added (t=0ms)
      -> POST /api/cart (t=23ms)
         -> Response (t=168ms)
  4. Click a request to see method, status, duration, response body.

Correlation window​

Event Lens correlates API calls made within 200 ms after an event:

Event       (t=100ms)
  -> API    (t=250ms)   correlated
  -> Cb     (t=280ms)   correlated
  -> Other  (t=350ms)   not correlated (>200ms)

The 200 ms window is the default. Most user-action-triggered API calls happen well within it.

Using it​

  • Verify analytics fired — click a button, see the analytics POST follow.
  • Find missing API calls — if an event has no correlated request, your handler may be silently failing.
  • Spot redundant calls — when one event triggers two requests for the same resource.

Tracing Event Chains​

Events can trigger other events. Event Lens visualises the full chain.

Steps​

  1. Open the Chains tab.
  2. Inspect the visual graph: 
    user:submit-checkout
         |
    validate:form
         |
    api:request-checkout
         |
    api:response-error
         |
    ui:show-error
  3. Click any node to see its details and timing.
  4. Read the timing — how many ms after the previous event was each one fired?

Use chains to:

  • Understand cause-and-effect when something goes wrong.
  • Spot infinite loops (event fires itself, directly or via a sibling).
  • Verify your new event integrates correctly into the existing flow.

Debugging Cross-Tab Communication​

BroadcastChannel lets two tabs exchange messages. When sync is broken, Event Lens helps.

Steps​

  1. Open the BroadcastChannel tab.
  2. See the messages: 
    BroadcastChannel:sync-theme
      Payload:    { theme: 'dark' }
      Timestamp:  14:03:21
      Cross-tab:  broadcast
  3. Open DevTools in the other tab and go to the same view — you'll see the same messages.
  4. Compare timing and payload between tabs to find where sync diverges.

Tips & Tricks​

  • Combine Chain + Network — for any chain step that should hit an API, verify the request is in Network correlation.
  • Network with no event — pure API responses (e.g. cron-style polling) won't have a triggering event. They show under "uncorrelated" in the Network tab.
  • Cross-tab debugging — keep DevTools open in both tabs to see the broadcast on both sides simultaneously.

See Also​