> ## Documentation Index
> Fetch the complete documentation index at: https://docs.taginsight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Live debugger

> Real-time tracking debugging and data layer inspection

## Overview

The Live Debugger is a powerful web-based tool within Tag Insight that allows you to monitor and debug tracking implementations in real-time. Unlike the Chrome extension, the Live Debugger runs directly in your Tag Insight dashboard, providing comprehensive insights into your tracking data flow.

<img src="https://mintcdn.com/taginsight/poFMsZzsIjoQTyP7/images/livedebugger.png?fit=max&auto=format&n=poFMsZzsIjoQTyP7&q=85&s=b48729687cb1d158e71753d2e996ef1b" alt="Tag Insight Live Debugger" style={{borderRadius: "8px", margin: "20px 0"}} width="2852" height="1688" data-path="images/livedebugger.png" />

<Note>
  Based on the Tag Insight menu structure, the Live Debugger is accessible directly from your project dashboard alongside other monitoring tools.
</Note>

## Accessing the Live Debugger

<Steps>
  <Step title="Navigate to Your Project">
    Log into Tag Insight and select your project
  </Step>

  <Step title="Click Live Debugger">
    Find "Live debugger" in the project menu
  </Step>

  <Step title="Start Debugging Session">
    The debugger automatically connects to your site's tracking
  </Step>
</Steps>

## Key features

<CardGroup cols={2}>
  <Card title="Real-Time Event Stream" icon="stream">
    Watch events fire as users interact with your site
  </Card>

  <Card title="Data Layer Inspector" icon="magnifying-glass">
    Examine complete data layer contents
  </Card>

  <Card title="Validation Status" icon="check-circle">
    See immediate validation against your tracking plan
  </Card>

  <Card title="Filter & Search" icon="filter">
    Find specific events or issues quickly
  </Card>
</CardGroup>

## Interface Overview

### Event stream Panel

The main panel shows all tracking events in real-time:

```
┌─────────────────────────────────────────────────────────────────┐
│ Live Debugger - Project: Main Site Production                   │
├─────────────────────────────────────────────────────────────────┤
│ 🔴 Recording | Events: 247 | Errors: 3 | Warnings: 12          │
├─────────────────────────────────────────────────────────────────┤
│ 10:32:15 | ✅ page_view      | /products/shoes    | Valid      │
│ 10:32:16 | ✅ product_view   | SKU-12345         | Valid      │
│ 10:32:18 | ⚠️  add_to_cart   | SKU-12345         | Warning    │
│ 10:32:20 | ❌ checkout_start | /checkout         | Error      │
└─────────────────────────────────────────────────────────────────┘
```

### Event details Panel

Click any event to see detailed information:

<Tabs>
  <Tab title="Data Layer">
    ```javascript theme={null}
    {
      event: "add_to_cart",
      ecommerce: {
        currency: "EUR",
        value: 89.99,
        items: [{
          item_id: "SKU-12345",
          item_name: "Running Shoes",
          price: 89.99,
          quantity: 1,
          item_category: "Footwear"
        }]
      },
      user_data: {
        logged_in: true,
        customer_type: "returning"
      }
    }
    ```
  </Tab>

  <Tab title="Validation Results">
    ```
    ✅ Event name: Valid
    ✅ Currency: Valid (EUR)
    ⚠️  Value: Warning - Should include tax
    ✅ Items array: Valid
    ✅ Item structure: Valid
    ⚠️  Missing: shipping_tier (optional)
    ```
  </Tab>

  <Tab title="Technical Info">
    ```
    Timestamp: 2024-01-15T10:32:18.123Z
    Page URL: https://example.com/products/shoes
    User Agent: Chrome 120.0.0.0
    Session ID: sess_abc123
    IP: 192.168.1.1 (anonymized)
    Tag Insight Pixel: v1.2.3
    ```
  </Tab>
</Tabs>

## Debugging Features

### Live Validation

The debugger validates events against your tracking plan in real-time:

* **Green checkmark (✅)**: Event passes all validation rules
* **Yellow warning (⚠️)**: Minor issues or missing optional data
* **Red error (❌)**: Critical validation failures

### Filter Options

Focus on specific issues:

<AccordionGroup>
  <Accordion title="By Event Type">
    * Filter by specific events (e.g., only "purchase" events)
    * Show only e-commerce events
    * Hide page\_view events for clarity
  </Accordion>

  <Accordion title="By Status">
    * Show only errors
    * Show only warnings
    * Show successful events
    * Show unknown events
  </Accordion>

  <Accordion title="By Page">
    * Filter by URL pattern
    * Focus on specific sections
    * Exclude admin pages
  </Accordion>

  <Accordion title="By Time">
    * Last 5 minutes
    * Last hour
    * Custom time range
  </Accordion>
</AccordionGroup>

### Search Functionality

Powerful search across all event data:

```
Search examples:
- "transaction_id:ORD-12345" - Find specific order
- "value:>100" - Find high-value events  
- "error:missing_variable" - Find specific errors
- "user_id:null" - Find events with null user IDs
```

## Advanced Features

### Session Replay

Link events to specific user sessions:

<Steps>
  <Step title="Select Session Mode">
    Toggle from "All Events" to "Session View"
  </Step>

  <Step title="Choose Session">
    Select a specific session ID or user
  </Step>

  <Step title="View Journey">
    See complete event sequence for that session
  </Step>

  <Step title="Identify Issues">
    Spot where tracking breaks in user journey
  </Step>
</Steps>

### Compare Mode

Compare expected vs actual data:

```
Expected (from Tracking Plan)     |  Actual (from Live Data)
----------------------------------|----------------------------------
event: "purchase"                 |  event: "purchase" ✅
transaction_id: string (required) |  transaction_id: "ORD-789" ✅
value: number (required)          |  value: "99.99" ❌ (string)
currency: string (required)       |  currency: "EUR" ✅
items: array (required)           |  items: [...] ✅
coupon: string (optional)         |  [missing] ⚠️
```

### Export Capabilities

Export debugging sessions for analysis:

* **JSON Export**: Complete event data
* **CSV Export**: Simplified tabular format
* **Share Link**: Send session to teammates
* **Create Report**: Generate debugging report

## Use Cases

### During Development

<CardGroup cols={2}>
  <Card title="New Feature Testing" icon="flask">
    Verify tracking for new features before release
  </Card>

  <Card title="Integration Testing" icon="plug">
    Ensure third-party tools integrate correctly
  </Card>
</CardGroup>

### Production Monitoring

<CardGroup cols={2}>
  <Card title="Issue Investigation" icon="magnifying-glass">
    Debug reported tracking problems
  </Card>

  <Card title="Performance Monitoring" icon="gauge">
    Monitor tracking performance metrics
  </Card>
</CardGroup>

## Integration with Other Tools

### Chrome extension

The Live Debugger complements the Chrome extension:

* **Chrome Extension**: Local debugging, single user
* **Live Debugger**: All traffic, multiple users
* **Both**: Can be used simultaneously

### Audit Reports

Link from audit reports to live debugging:

1. Find issue in audit report
2. Click "Debug Live"
3. Opens Live Debugger filtered to that issue
4. See real-time occurrences

### Data layer Collector

Switch between tools seamlessly:

* **Live Debugger**: Real-time monitoring
* **Data Layer Collector**: Historical analysis
* **Use both**: Complete picture of tracking health

## Best practices

### Effective Debugging

<Steps>
  <Step title="Start Broad">
    Begin with all events to understand context
  </Step>

  <Step title="Filter Down">
    Apply filters to focus on specific issues
  </Step>

  <Step title="Examine Patterns">
    Look for commonalities in failures
  </Step>

  <Step title="Test Solutions">
    Make changes and verify in real-time
  </Step>
</Steps>

### Performance Tips

For high-traffic sites:

* **Use Sampling**: Enable sampling mode for performance
* **Apply Filters Early**: Reduce data volume
* **Focus Sessions**: Debug specific users/sessions
* **Clear Old Data**: Regularly clear debugging cache

## Common Debugging Scenarios

### Scenario 1: Missing Purchase Events

```
Filter: event:"purchase" OR page:"/confirmation"
Finding: Page loads without purchase events
Solution: Check conditional logic in tracking code
```

### Scenario 2: Malformed Data

```
Filter: status:"error" AND validation:"type_mismatch"
Finding: Prices sent as strings
Solution: Fix data type conversion
```

### Scenario 3: Timing Issues

```
View: Session replay mode
Finding: Events fire before data is ready
Solution: Implement proper event sequencing
```

## Keyboard Shortcuts

Speed up debugging with shortcuts:

| Shortcut | Action              |
| -------- | ------------------- |
| `Space`  | Pause/Resume stream |
| `C`      | Clear event list    |
| `F`      | Focus filter box    |
| `E`      | Export current view |
| `S`      | Toggle session mode |
| `Esc`    | Close detail panel  |

## Troubleshooting

<AccordionGroup>
  <Accordion title="No Events Showing">
    * Verify pixel is installed and active
    * Check browser ad blockers
    * Confirm project selection
    * Try refreshing the debugger
  </Accordion>

  <Accordion title="High Latency">
    * Check network connection
    * Enable sampling mode
    * Clear debugging cache
    * Contact support if persistent
  </Accordion>

  <Accordion title="Missing Validation">
    * Ensure tracking plan is configured
    * Check event names match exactly
    * Verify validation rules are set
    * Refresh tracking plan cache
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Chrome Extension" icon="chrome" href="/tools/chrome-extension">
    Use for local debugging
  </Card>

  <Card title="Data Layer Collector" icon="database" href="/monitoring/data-layer-collector">
    Analyze historical data
  </Card>

  <Card title="Debugging Guide" icon="bug" href="/troubleshooting/debugging">
    Advanced debugging techniques
  </Card>

  <Card title="Setting Up Audits" icon="magnifying-glass" href="/monitoring/setting-up-audits">
    Configure automated monitoring
  </Card>
</CardGroup>