The TagDragon panel has two toolbar rows. All icons are from the Lucide icon library. Buttons with a toggle state show an active indicator when enabled.
Row 1 — Global Tab Bar (32 px)
The top row contains the main view switcher on the left and global actions on the right.
Left side — Tabs
| Icon | Lucide | Button | Description |
|---|---|---|---|
| 🔌 | cable | Requests | Switch to the network request capture view. Shows a badge with the total request count. |
| 🗄️ | database | DataLayer | Switch to the DataLayer inspector view. Shows a badge with the total push count. |
Right side — Global actions
| Icon | Lucide | Button | Shortcut | Description |
|---|---|---|---|---|
| ⏸ / ▶ | pause / play | Pause / Resume | — | Toggle request capture on/off. Turns amber when paused. Applies to the active view (Requests or DataLayer). |
| 🗑️ | trash-2 | Clear | Ctrl+L | Remove all captured requests (Requests view) or all pushes (DataLayer view). |
| 🍪 | cookie | Clear Cookies | — | Delete all cookies for the inspected page. Shows a confirmation tooltip after clearing. |
| 🛡️ | eraser | Consent | — | Open the Consent Panel to inspect and override consent/cookie state. |
| ❓ | circle-help | Info | — | Open the Info popover with version info, documentation links, and help. |
Row 2 — Context Toolbar (34 px)
The second row contains a search input on the left and quick action buttons on the right.
Left side — Search
| Icon | Lucide | Element | Shortcut | Description |
|---|---|---|---|---|
| 🔍 | search | Search input | Ctrl+F | Filter requests by URL text, parameter name, or parameter value. Debounced at 150 ms. |
| ✕ | x | Clear filter | Esc | Clear the search input and remove the text filter. Hidden when search is empty. |
Right side — Quick actions
All quick action buttons are 26 × 26 px square buttons. Active buttons show an amber border and icon color.
| Icon | Lucide | Button | Shortcut | Description |
|---|---|---|---|---|
| ⇅ | arrow-up-down | Sort Order | — | Toggle between newest-first and oldest-first. Active when sorted newest-first. Tooltip shows current order. |
| ↩ | wrap-text | Wrap Values | — | Toggle wrapping of long parameter values in the detail pane. Active when wrapping is on. |
| 📑 | maximize-2 | Auto-expand | — | Auto-expand all detail sections when selecting a request. Active when enabled. |
| ☰ | align-justify | Compact Rows | — | Toggle compact row display for a denser request list. Active when compact mode is on. |
| 🔽 | filter | Provider Filter | Ctrl+Shift+F | Open the provider filter popover to show/hide individual providers grouped by category. Shows an active indicator when any providers are hidden. |
| 📥 | download | Export | — | Export captured requests. Format defaults to JSON or CSV based on settings (configurable in Settings). |
| ☀️ / 🌙 | sun / moon | Theme | — | Toggle between dark and light mode. The inactive icon is hidden via CSS custom properties. |
| ⚙ | settings | Settings | — | Open the Settings popover (max requests, auto-prune, default tab, timestamp format, export format, sort order, wrap values, auto-expand, compact rows). |
Filter Bar
Appears below the context toolbar when any filter is active. Shows removable chips for:
- Text search — e.g.
"sklik" - Hidden providers — e.g.
GA4 hidden - Event type, HTTP method, status, user ID, parameter — from the filter popover
Click the × on any chip to remove that filter.
Status Bar (24 px)
The bottom bar shows real-time statistics:
- Request count — number of visible (filtered) requests
- Total size — cumulative size of visible requests
- Average duration — response time average
- Success rate — percentage of 2xx responses
Turns amber when the panel is paused.
Popovers
Settings
Opened via the ⚙ button. Contains sections for:
- Performance — Max requests, Auto-prune toggle
- Display — Default detail tab, Timestamp format, Compact rows
- Behavior — Sort order, Wrap values, Auto-expand
- Export — Default export format (JSON/CSV)
- Reset filters — clears all filters but keeps hidden providers
Provider Filter
Opened via the 🔽 button. Contains:
- Search — filter providers by name
- Provider groups — collapsible sections by category (Analytics, Tag Managers, etc.)
- Per-provider pills — click to toggle visibility, dot color matches provider color, superscript shows request count
- All / None — show or hide all providers in a group
Hidden providers persist across DevTools restarts via chrome.storage.local.
Info
Opened via the ❓ button. Shows version info, documentation links, and keyboard shortcuts reference.
Consent Panel
Opened via the 🛡️ button. See the Consent Panel page for details.