Chrome ExtensionAnalyticsReactTailwindDevTools

EventPeek

EventPeek is a powerful Chrome extension designed to intercept, view, and debug analytics events on Quince storefronts. It provides real-time visibility into Mixpanel, IA (Internal Analytics), and Server Pixel events as they happen.

Try Interactive Preview
EF
EventPeek
top_nav_openedIA
19:35:20
menu_openedMixpanel
19:35:20

Analytics Playground

Perform actions to fire events into the extension.

πŸ•ΈοΈ The Chaos of Analytics Debugging

In a complex e-commerce ecosystem, analytics events fire constantly from multiple providers (Mixpanel, Internal Analytics, Pixels).

Developers and QA engineers typically face a nightmare:

1. Open Chrome DevTools > Network Tab.

2. Filter by obscure strings like `mixpanel` or `collect`.

3. Click a request, scroll through a tiny window, and try to read a minified JSON blob.

4. *"Did that event have the correct `sku_id`? Wait, let me check again..."*

🎣 The Solution: EventPeek

EventPeek sits as a dedicated layer between the browser and the analytics providers, **intercepting everything**.

# ✨ Key Capabilities

* **Real-Time Stream:** See events pop up instantly as you browse the site.

* **Provider Badges:** Instantly distinguish between IA (Internal) and Mixpanel events.

* **Smart Parsing:** No more JSON parsing in your head. Click any event to see a beautifully formatted, syntax-highlighted Inspector.

* **Environment Context:** Switch filters between Prod, Stage, and Dev environments effortlessly.

πŸ›  Technical Implementation

Built using React and the Chrome Extensions API, utilizing a background script to listen for specific network patterns and passing them to a React-based Popup UI via runtime messaging.

How to Install

  1. Download the zip file above.
  2. Unzip the file to a folder.
  3. Go to chrome://extensions
  4. Enable Developer mode (top right).
  5. Click Load unpacked.
  6. Select the unzipped folder.

Key Features

  • Real-time Event Interception
  • Multi-Provider Support (Mixpanel, IA, Server Pixel)
  • JSON Viewer for complex properties
  • Environment Switching (Prod/Stage/Dev)
  • Powerful Search & Filter

Tech Stack

ReactChrome Extensions APITailwind CSSFramer Motion