Skip to main content
Version: 0.1.0

Frequently Asked Questions

Use Ctrl+F or Cmd+F to find a question fast.

Installation & Compatibility​

Which browsers does Event Lens work in?​

Chrome and Chromium-based browsers only (Edge, Brave, Opera). Firefox support isn't there yet.

Can I use it in my production app?​

No. Event Lens is a dev tool. It runs inside DevTools, not in production. For production event tracking, use a service like Segment or Mixpanel.

Where do I install the extension?​

  1. Open Event Lens on the Chrome Web Store.
  2. Click Add to Chrome.
  3. Confirm permissions when prompted.
  4. Open any page and press F12 — the Event Lens tab appears in DevTools.

Nothing shows up after install. What's wrong?​

Check the obvious things:

  • Is DevTools open (F12)?
  • Is the Event Lens tab visible?
  • Are events actually being fired on the page?
  • Are there errors in the Console?

If nothing helps, close and reopen DevTools, then hard-refresh the page with Cmd+Shift+R.

Is it on the Chrome Web Store?​

Yes. Find Event Lens on the Chrome Web Store and click Add to Chrome.

Capture & Events​

Why don't I see any events?​

Capture is automatic, but:

  1. Nothing's firing on the page — click, scroll, submit a form.
  2. The event bus isn't loaded — check whether the bus exists on window.
  3. There's an error in the code — check the Console.
  4. Event Lens didn't load — refresh DevTools.

Why don't I see native DOM events (click, scroll)?​

That's correct — Event Lens captures:

  • CustomEvent (dispatchEvent).
  • postMessage.
  • BroadcastChannel.
  • Event buses (emit/on).
  • fetch / XHR.

Not captured:

  • Native DOM events (click, scroll, focus). Use the Chrome DevTools Event Listeners panel for those.

Why don't I see postMessage events?​

Event Lens catches:

  • window.postMessage().
  • worker.postMessage().
  • iframe.contentWindow.postMessage().

Not caught:

  • channel.port1.postMessage() (MessageChannel).
  • WebSocket messages.

Can I capture Node.js events?​

No. Event Lens captures browser JavaScript events only. For backend, use Winston, Bunyan, or similar.

Can I see Service Worker events?​

Partially. Yes for:

  • postMessage (between SW and main thread).
  • fetch events (for network tracing).

The Service Worker's internal events aren't captured.

Filtering & Analysis​

How do I clear the filter?​

Empty the filter input or click the X.

How do I remove a conditional filter?​

Click the X next to the conditional filter, or click Clear filters to remove all of them.

How do I sort events by timestamp?​

Use the sort button at the top of the panel (ascending / descending).

What does "schema drift" mean?​

The shape of the payload changed compared to a previous fire of the same event:

First:   { userId: 123 }
Second:  { userId: 456, role: 'admin' }   <- new key

Event Lens detects this and surfaces a [DRIFT] badge.

Why does schema drift matter?​

It can quietly break your code:

  • Subscribers expecting the new key get undefined.
  • Type mismatches (string instead of number).
  • Backward-compatibility breaks.

What does DUP mean?​

Duplicate. The same event fired more than once with the same payload in quick succession:

cart:item-added { itemId: 123 }   First
cart:item-added { itemId: 123 }   DUP (badge: DUP x2)

Common causes: double clicks, listener loops, accidental re-emits.

Debug & Replay​

How does Replay work?​

It re-fires the event on the page:

Original: cart:item-added { itemId: 123 }
[Replay]
  -> Event fires again on the page
  -> Subscribers run
  -> UI updates

A confirmation prompt prevents accidental triggers.

What happens when I edit a payload and replay?​

Original: { itemId: 123 }
Edited:   { itemId: 999 }
[Replay Edited]
  -> Event fires with the new payload
  -> Subscribers receive the new payload

No confirmation — editing is itself the intent.

What's the replay queue?​

Replay several events in sequence:

Queue:
  1. user:login
  2. product:viewed
  3. cart:item-added

[Play All]   500 ms delay between each (configurable)

Useful for simulating test scenarios.

What can I do while paused on a breakpoint?​

Open the Console and inspect state:

> window
> state
> window.eventEmitter

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

How do I remove a breakpoint?​

Click the event, then click the breakpoint toggle again (red turns back to gray).

Sessions, Export, Import​

How much data does a session hold?​

  • Every event (the most recent 500; older ones drop out).
  • Network requests.
  • Memory leak report.
  • Listener counts.
  • Breakpoints.
  • Budget config.
  • Replay history.

A typical session is 5–50 MB depending on event volume.

Where should I keep exported JSON files?​

Anywhere convenient: email, GitHub issues, Google Drive, your repo (as test cases).

Can I import a JSON exported by someone else?​

Yes:

Import → pick file → restore

All events, state, and breakpoints are restored.

Is session privacy a concern?​

Yes. Exported JSON can contain:

  • User IDs.
  • API responses.
  • Form data (including passwords).

Strip sensitive data before sharing.

Memory & Performance​

What is a memory leak?​

Event listeners that aren't released:

Added:        100 listeners
Removed:      50  listeners
Outstanding:  50 listeners   <- leak

In long-running apps, memory grows over time.

How does leak detection work?​

Event Lens tracks:

  • addEventListener calls.
  • removeEventListener calls.
  • The balance (added − removed).

If the threshold is exceeded (50+) or growth is fast: a leak badge.

Are false positives possible?​

Yes. Example:

init() runs twice:
  Added:        100 listeners
  Removed:      100 listeners
  Outstanding:  0
  But Event Lens still records 100 added.

Verify the stack trace manually before chasing it.

How do I remove listeners properly?​

function attach() {
  element.addEventListener('resize', handler);
}
function detach() {
  element.removeEventListener('resize', handler);
}

// Mount
attach();
// Unmount
detach();

What are the budget rules for?​

RuleWhy
Max payload: 50 KBSerialization is slow, network is costly
Max frequency: 100/secCPU heavy, UI stutters
Max subscriber duration: 100 msBlocks the event loop
Max total/min: 10,000Memory + CPU spike

Adjust them under Settings → Budget.

How do I fix a budget violation?​

  1. Click the violation badge.
  2. Inspect the event.
  3. Shrink the payload (drop deep clones).
  4. Make it async (debounce, throttle).
  5. Optimise subscribers.

Network & Analysis​

What's network correlation?​

The timing relationship between an event and its API request:

Event: cart:item-added (t=100ms)
       -> 23 ms later
API:   POST /api/cart (t=123ms)

Event Lens correlates requests within a 200 ms window.

How do I find where a network request came from?​

Click the request in the Network tab — its stack trace appears, and you can open the source file.

Are cached requests visible?​

No. Browser-cached responses (304) don't reach Event Lens.

Privacy & Security​

Is exported data sensitive?​

Yes. JSON can contain:

  • User IDs.
  • Session tokens.
  • API responses.
  • Form inputs.

Don't paste it into a public GitHub issue.

Where does Event Lens send data?​

Nowhere. Everything is local:

  • DevTools local storage.
  • Browser memory.
  • Stays on your machine unless you export.

No telemetry, no tracking.

Does Event Lens access the file system?​

Only via the export download. It can't read other files.

Is it GDPR compliant?​

Technically yes — data is stored locally. But if your app logs PII (session IDs, etc.), Event Lens captures it locally too. Consider masking PII in your app. See the privacy policy for details.

Troubleshooting​

Payloads aren't shown (only the summary)​

Likely causes:

  • payload: null — script injection blocked.
  • Payload couldn't be serialised (circular references).

Check CSP rules and whether JSON.stringify succeeds.

Events appear with a delay​

Event Lens batches for performance:

fire -> capture -> batch (max 100 ms) -> DevTools -> panel

A ~100 ms delay is normal.

The panel crashes​

Copy the error from the Console and open an issue. Workaround: refresh DevTools with Cmd+Shift+R.

Events show up empty (null payload)​

Possible causes:

  1. Serialization failed (circular reference).
  2. Event data was mutated after the event passed.
  3. Script injection failure.

Check the Console for errors.

Advanced​

My custom event bus isn't auto-detected​

Does it match an auto-detect pattern?

window.myBus = {
  emit: function () { /* ... */ },
  on:   function () { /* ... */ }
};

If not, add the manual hook:

window.__REACT_EVENT_LENS__ = {
  onEvent: function (cb) {
    myBus.on('*', cb);
  }
};

I have multiple event buses — are they all captured?​

Yes. Event Lens scans window:

window.eventBus1 = { emit, on };
window.eventBus2 = { fire, on };
window.bus3      = { dispatch, subscribe };

Auto-detect finds every known pattern.

How does Event Lens itself perform?​

Minimal overhead:

  • ~1–2% CPU.
  • ~5–10 MB memory (depends on session size).
  • Network: 0 (everything local).

For very long sessions, Clear Log to free memory.

Can I disable event logging entirely?​

Not currently. Workaround: Clear Log. Open an issue if you'd like a feature flag.

Support & Feedback​

How do I report a bug?​

GitHub Issues → New issue. Include:

  • Browser, OS, app info.
  • A screenshot and the Console error.
  • A sanitised exported session.

Feature request?​

GitHub Issues → New issue. Describe what, why, and an example scenario.

My question isn't answered here​

Open a GitHub Discussion or comment on a related issue. To get a fast reply: console error, sanitised session, repro steps.

More: Introduction · Features · Guides · Privacy.