The dragon that sees every tag.
Debug marketing & analytics tracking requests — right inside Chrome DevTools.
Install — Free · Website · Docs · Changelog
59 providers · DataLayer Inspector · Consent Panel · No data leaves your browser
|
Real-time monitoring of tracking requests from 59 providers. Pause/resume, sort, auto-prune. |
Intercept pushes from GTM, Tealium, Adobe, Segment, and W3C digitalData. Deep diff, cumulative state, network correlation, validation, watch paths, and group-by-source. |
Inspect and override cookie/consent state. Test consent mode behavior without manually clearing cookies. |
|
GA4, Meta, TikTok, LinkedIn, Adobe, Hotjar, Braze, HubSpot, Medallia, RudderStack, and 49 more across 9 categories. |
Switch between DEV/ACC/PROD Adobe Launch environments via network-level redirects. Persists across navigations. |
Download captured requests as JSON or CSV. Extension popup with live stats and provider breakdown. |
See it in action — visit tagdragon.net for screenshots and a live demo.
- Download the latest ZIP from GitHub Releases
- Open
chrome://extensions/, enable Developer mode, click Load unpacked, and select the unzipped folder - Open DevTools on any page → find the TagDragon tab
That's it. No configuration needed — tracking requests appear automatically.
Requires Node.js 18+ and Chrome 102+
git clone https://github.com/onbezucha/tagdragon.git
cd tagdragon
npm install
npm run buildFor development with live reload:
npm run dev # Watches CSS + JS for live changes59 providers across 9 categories + ungrouped.
| Category | Count | Providers |
|---|---|---|
| 📊 Analytics | 12 | GA4, Adobe Client-Side, Adobe Server-Side (AEP WebSDK), Amplitude, Mixpanel, Matomo, Piwik PRO, AT Internet, Comscore, Parse.ly, Medallia DXA, RudderStack |
| 🏷️ Tag Managers | 5 | Google Tag Manager, Tealium, Segment, Ensighten, Piwik PRO TM |
| 📢 Marketing & Advertising | 22 | Google Ads, Meta Pixel, Bing Ads, Adform, DoubleClick, Criteo, Seznam Sklik, TikTok, X, Pinterest, The Trade Desk, Reddit, Snapchat, Spotify, Amazon Ads, Outbrain, Teads, RTB House, Sojern, Brevo, Invoca, HubSpot |
| 🎥 Session Replay | 6 | Hotjar, Microsoft Clarity, Microsoft Clarity Tag, FullStory, Crazy Egg, Glassbox |
| 🧪 A/B Testing | 4 | Optimizely, Dynamic Yield, Split, Omniconvert |
| 👤 Visitor Identification | 3 | LinkedIn, Demandbase, 6Sense |
| 💬 Customer Engagement | 2 | Braze, Lytics |
| 🗄️ CDP | 2 | mParticle, Tealium EventStream |
| 🍂 Adobe Stack | 3 | Adobe Target, ECID, Launch (CN) |
| 🔧 Other | 2 | Microsoft Clarity Tag, Seznam Sklik |
Note: Some providers appear in multiple contexts. Microsoft Clarity Tag (library load detection) is separate from Microsoft Clarity (event tracking) and is listed under Session Replay but is ungrouped in the provider filter. Seznam Sklik appears in both Marketing and Other.
👉 Full provider reference with URL patterns: tagdragon.net/docs/providers
| Use Case | How TagDragon Helps |
|---|---|
| QA & Implementation | Verify tags fire correctly. Catch broken events, missing parameters, and misconfigured pixels before deployment. |
| Privacy & Compliance | See exactly what data leaves the browser. Audit payloads for GDPR/CCPA. Use the Consent Panel to test consent mode behavior. |
| Performance Review | Identify redundant tracking calls and oversized payloads. Auto-pruning keeps things fast on high-traffic sites. |
| Adobe Stack Debugging | Switch DEV/ACC/PROD environments at the network level. Debug Launch, Analytics, and Target in one panel. |
| DataLayer Validation | Define custom validation rules for data layer pushes. Watch specific paths, detect missing keys, and validate e-commerce events. |
| Shortcut | Action |
|---|---|
Ctrl+L |
Clear all requests |
Ctrl+F |
Focus search input |
↑ / ↓ |
Navigate list |
Esc |
Clear search / close panel |
👉 Full shortcut reference: tagdragon.net/docs/keyboard-shortcuts
| Command | Description |
|---|---|
npm run dev |
Watch mode — rebuilds CSS + JS on changes |
npm run build |
Production build (minified) |
npm run lint |
ESLint check |
npm run format |
Prettier auto-format |
npm run format:check |
Prettier check (CI) |
npm run test |
Vitest run all tests (115 test files) |
npm run test:watch |
Vitest watch mode |
npm run test:coverage |
Vitest with coverage report |
npm run analyze |
Build with bundle visualizer → dist/stats.html |
npm run generate-icons |
Regenerate extension icons |
npm run generate-provider-icons |
Regenerate provider icons |
Pre-commit hooks (Husky + lint-staged) auto-lint and format staged .ts files.
CI runs on every push/PR to master: lint → format check → type-check → test → build.
Full documentation available at tagdragon.net/docs.
| Page | Description |
|---|---|
| Getting Started | Installation and first steps |
| Features | Complete feature overview |
| DataLayer Tab | DataLayer inspector guide |
| Consent Panel | Consent testing guide |
| Provider Reference | All 59 providers |
| Adobe Env Switcher | Adobe environment switching |
| Toolbar Reference | Complete UI reference |
| FAQ | Frequently asked questions |
Contributions are welcome! See CONTRIBUTING.md for setup instructions, code style, and how to add a new provider.
See SECURITY.md for vulnerability reporting policy. Key points:
- All user-visible strings are HTML-escaped
- No external network calls — data stays in your browser
- Adobe redirect URLs are validated against an allowlist
- Cookie access only via explicit user interaction