01
Hybrid section detection
Auto-detects cards, panels, and regions on the page. Pick, remove, or merge sections manually with the on-page toolbar.
Features
Everything you need to understand what a webpage is really doing — which UI areas trigger which API calls, and which analytics events fire on interaction.
02
Network capture
Intercepts fetch and XHR without Chrome's debugger warning bar. See request and response details in the side panel.
03
API correlation
Links APIs to UI sections using timing, DOM mutations, and content heuristics. Manual linking when you need it.
04
Analytics tracker
Always-on capture for GTM, GA4, MoEngage, Segment, and more. See provider, trigger element, and parameters live.
05
Sanity mode
Upload a CSV spec and validate event names and parameters in real time against what the page actually fires.
06
Side panel exports
Download scan results as JSON or CSV. Copy curl commands and event JSON to the clipboard with one click.
How it works
Start a scan in seconds. No setup, no cloud account.
- 1
Open any http/https site
Navigate to the page you want to debug — staging, production, or local.
- 2
Click Tracekit → Start Scan
The side panel opens alongside the page with live capture.
- 3
Review APIs, Analytics, and Sanity
Switch tabs to inspect linked API calls, analytics events, or spec validation.
- 4
Refine sections on the page
Use the floating toolbar to Pick, Remove, or Merge detected UI regions.
- 5
Export when you're done
Download JSON or CSV, or copy curl commands and event payloads.
Who it's for
- Frontend and full-stack developers debugging API-driven UIs
- QA engineers validating that clicks fire the right backend calls
- Analytics engineers validating tag manager and analytics implementations
- Anyone auditing third-party tags on a staging site