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

# Debug Window

> Advanced debugging tools for ElasticFunnels pages - monitor events, interactions, components, and performance

The Debug Window shows what is happening on an ElasticFunnels page: events, interactions, components, builders, templates, console logs, and device state.

<Note>
  The Debug Window loads asynchronously. Open it with **Ctrl + Shift + F12** (Windows/Linux) or **Command + Shift + F12** (Mac) on any ElasticFunnels page, or click **Debugger** in the top bar on any builder or code editor page.
</Note>

## Features

### 🔍 **Real-time Monitoring**

* Live page and backend event tracking
* Component discovery and interaction monitoring
* Device, viewport, and app state updates every second

### 🎯 **Interactive Debugging**

* Component highlighting and navigation
* Direct links to builder interfaces
* Console log capture and filtering

### **Page Context**

* Funnel event visualization
* Page builder and events builder shortcuts
* Export page events and debug payloads

## Getting Started

### Activating the Debug Window

1. **Open your ElasticFunnels page** in a web browser
2. **Press Ctrl + Shift + F12** (Windows/Linux) or **Command + Shift + F12** (Mac) to activate the debug window
3. **The debug window slides up** from the bottom of the screen

The debug window automatically starts monitoring your page and capturing relevant debugging information.

### How to use the Debug Window

1. **Open it** — **Ctrl + Shift + F12** (Windows/Linux) or **Command + Shift + F12** (Mac) on any ElasticFunnels page, or click **Debugger** in the top bar on a builder/code editor page.
2. **Choose a tab** — Click one of the tab buttons (Overview, Events, Page Events, Funnel, Interactions, Components, Builders, **Templates**, Console) to switch views.
3. **Use the panel**:
   * **Overview** — Quick snapshot of device, viewport, and app state (FID, Page ID, etc.).
   * **Events** — Funnel event hierarchy and flow.
   * **Page Events** — Backend page events and Script Rule results (Refresh/Clear/Export). Expand events for full context.
   * **Funnel** — How the page maps to the funnel; links to funnel builder and node.
   * **Interactions** — Tracked interactions; use focus/highlight to find elements.
   * **Components** — List of components; focus or highlight to inspect on the page; links to builders.
   * **Builders** — Shortcuts to Page Builder, Events Builder, Component Builder.
   * **Templates** — Frontend template engine: **Events** (New/Previous) for template-if results; **Pick element** then click a node to see its template bindings and child tree. See [Frontend Template Engine — Debugging](/frontend-template-engine/debugging).
   * **Console** — Captured console logs; filter by type; export.
4. **Resize** — Drag the handle at the top edge of the panel to change height. Close with the header button or press the hotkey again.

<Tip>
  From the **Page Builder** or **Page Events** UI, click **Debugger** to open the page in a new tab with the Debug Window already active—useful for testing Script Rules and page events.
</Tip>

## Debug Window Tabs

### Overview

The Overview tab provides a quick snapshot of your page's current state:

#### System Information

* **Device**: Current device type detection
* **Screen**: Browser window dimensions
* **Viewport**: Available content area
* **User Agent**: Browser information

#### App State

* **FID**: Funnel ID
* **Page ID**: Current page identifier
* **Brand ID**: Associated brand
* **Page Events**: Number of configured events
* **Interactions**: Number of tracked interactions
* **SIDs**: Session identifiers

### Events

Monitor your page's funnel events:

#### Funnel Visualization

* **Event hierarchy**: Visual representation of your funnel structure
* **Event details**: Step IDs, data, and next events
* **Event flow**: How events connect and trigger

### Page Events

Inspect backend-evaluated page events (populated by the server during the request):

* **Refresh**: Re-read the current page's backend events
* **Clear**: Clear the frontend cache of events for this page
* **Export**: Download a JSON file with the full backend debug payload
* **Status**: See whether debug is enabled, total events, event types, last event time, and the current debug key

Each event shows its type, relative time, status, and a details section. Expand "Full Context" to view the entire event payload.

#### Script Rule Debugging

The Page Events tab provides comprehensive debugging for Script Rule nodes:

**Script Rule Information Displayed:**

* **Result**: `TRUE` or `FALSE` - which path the flow took
* **Execution Time**: How long the script took to execute (milliseconds)
* **Next Path**: The branch that was followed (`true` or `false`)
* **Script Length**: Number of characters in your script
* **Used Click Data**: Whether click data was accessed
* **Used IP Whois**: Whether geolocation data was loaded
* **Has Customer Data**: Whether customer information was available
* **Device Type**: The device type during execution
* **Console Messages**: All `console.log()`, `console.warn()`, and `console.error()` output from your script
* **Errors**: Full error messages if the script failed
* **Script Preview**: First portion of your script code
* **Full Context**: Complete evaluation data with all available variables

<Tip>
  To debug Script Rules, click **"Debugger"** in the Page Builder or Page Events interface. The Debug Window will open automatically with your page, showing detailed information about each Script Rule execution, including all console output and errors in the Page Events tab.
</Tip>

**Example Use Case:**

When your Script Rule isn't working as expected:

1. Add `console.log()` statements to your script to output variable values
2. Click **"Debugger"** in the Page Builder or Page Events interface
3. The page opens with Debug Window activated
4. Go to **Page Events** tab
5. Find the `script_rule` event
6. Click "View Console Messages" to see all your logs
7. Check the "Result" to see which path was taken
8. Review "Full Context" to see all available data

### Funnel

Understand how the current page maps to your funnel:

* **Brand ID / FID / FNID**: Quick references for funnel resolution
* **Funnel Builder**: Open the funnel builder
* **Open Node**: Deep link to the node if a node code is available
* **Show Step**: Fallback deep link based on step information

<Warning>
  If the page is not part of the current funnel, you'll see a banner explaining this. In that case, the funnel flow will not trigger from this page. See [Checkout Redirect Behavior](/funnels/checkout-redirect-behavior#default-redirect-behavior).
</Warning>

### Interactions

Track user interactions and form submissions:

* **Interaction list**: All tracked interactions on the page
* **Component details**: CCID, device type, and data
* **Focus functionality**: Highlight and scroll to interaction elements
* **Real-time updates**: See interactions as they happen

```javascript theme={null}
// Focus a specific interaction element by CCID
debugWindow.focusOnElement('ccid-123');
```

### Components

Manage and debug page components:

#### Component Analysis

* **Component list**: All components with CIDs
* **Element details**: Tag names, classes, IDs
* **Position data**: X/Y coordinates and dimensions
* **Visual debugging**: Highlight components on the page

#### Component Actions

* **Focus components**: Highlight and scroll to specific components
* **Builder links**: Direct links to component builders
* **Batch highlighting**: Highlight all components simultaneously

<CodeGroup>
  ```javascript Example: Component Debugging theme={null}
  // Focus on a specific component
  debugWindow.focusComponent('hero-section-123');

  // Highlight all components
  debugWindow.highlightAllComponents();

  // Clear all highlights
  debugWindow.clearHighlights();
  ```
</CodeGroup>

### Builders

Quick access to ElasticFunnels builder interfaces:

* **Page Builder**: Direct link to edit the current page
* **Events Builder**: Configure page events and funnels
* **Component Builder**: Edit specific components
* **Page Information**: Brand ID, Page ID, and FID details

### Templates

Debug the **frontend template engine** (template-if, template-foreach, bindings):

* **Events**: "New" shows template-if results from the last scope update (which condition was chosen, or "unchanged"); "Previous" shows earlier runs. Errors from invalid conditions appear here.
* **Inspect element**: Click **Pick element**, then click any node on the page to see its template bindings (**data-condition**, **data-each**, **data-ef-text**, **data-template-value**, etc.) and a tree of its children. The panel refreshes when scope updates.

When the Templates tab is open, the template processor sends debug events to the window (no URL flag needed). For full details, see [Frontend Template Engine — Debugging](/frontend-template-engine/debugging).

### Console

Capture and monitor JavaScript console output:

* **Log capture**: Automatically captures console.log, console.warn, and console.error
* **Log filtering**: View logs by type (info, warning, error)
* **Test logging**: Generate test logs for debugging
* **Export capability**: Export logs for analysis

## Window Controls

* **Resize**: Drag the handle at the top edge of the panel to adjust height
* **Persist size**: The panel remembers its height between sessions
* **Open/Close**: Use the close button in the header, or press the hotkey again

## Usage Examples

### Debugging Page Events

1. **Open the Events tab** to see your funnel structure
2. **Review the event hierarchy** to understand the flow
3. **Check the console** for any error messages

### Testing Component Interactions

1. **Navigate to the Components tab**
2. **Click "Highlight All"** to see all tracked components
3. **Click "Focus" on specific components** to examine them
4. **Use the builder links** to edit components directly

### Exporting Debug Data

Two export options are available:

* **Header → Export**: Downloads a JSON with device info, page events, interactions, and captured console logs
* **Page Events → Export**: Downloads the backend-evaluated page events and their full contexts

## Advanced Features

### Data Export

The debug window can export comprehensive debugging data:

```javascript theme={null}
// Export debugging data
debugWindow.exportData();
```

This creates a JSON file containing:

* Page configuration
* Event data
* Interaction logs
* Console logs

## Best Practices

### Development Workflow

1. **Always test events** using the manual triggers before going live
2. **Use component highlighting** to verify tracking setup
3. **Monitor console logs** for JavaScript errors
4. **Export debug data** for troubleshooting complex issues

### Debugging Troubleshooting

1. **Check the Overview tab** for basic page information
2. **Verify event configuration** in the Events tab
3. **Ensure components are tracked** in the Components tab
4. **Review console logs** for error messages

## Troubleshooting

### Debug Window Not Appearing

* **Check keyboard shortcut**: Ensure you're pressing **Ctrl+Shift+F12** (Windows/Linux) or **Command+Shift+F12** (Mac)
* **Verify page load**: Make sure the page has fully loaded
* **Check console**: Look for any JavaScript errors

### Components Not Highlighting

* **Refresh components**: Click the "Refresh" button in the Components tab
* **Check CID attributes**: Ensure components have proper `data-cid` attributes
* **Clear and re-highlight**: Use the clear and highlight buttons

### Funnel Links Not Appearing

* **Missing brand or funnel**: Ensure `Brand ID` and `FID` are present in the Overview tab
* **No node code available**: Only “Open Node” is shown when a node code is detected; otherwise, “Show Step” is used
* **Page not in funnel**: Follow the banner link and review [Checkout Redirect Behavior](/funnels/checkout-redirect-behavior#default-redirect-behavior)

### Debug Window Opens on Wrong Domain

If you opened the Debug Window from the Page Builder and it appears on a different domain than the one you need:

<Note>
  When you preview a page or open the Debugger, it opens on the first applicable domain. If your page isn’t assigned exclusively to a specific domain, it may open on the `*.elasticfunnels.io` subdomain. This is expected behavior. To preview on another domain, manually change the page URL’s domain and reopen the Debug Window there.
</Note>

1. In the already opened Debug Window, go to the **Overview** tab and copy the **Debug Key**
2. Navigate to the actual domain you want to debug
3. Press **Ctrl + Shift + F12** (Windows/Linux) or **Command + Shift + F12** (Mac) to open the Debug Window on that domain
4. Paste the **Debug Key** when prompted to attach the session to this domain

You can find the Debug Key in the **Overview** tab of the Debug Window.

<Warning>
  The Debug Window only loads when you trigger the hotkey and does not affect page performance for visitors.
</Warning>

## Related Documentation

* [Script Rule](/funnels/script-rule) - Learn about Script Rules and how to debug them
* [Checkout Redirect Behavior](/funnels/checkout-redirect-behavior#default-redirect-behavior) - Understand default redirects and funnel assignment
* [Page Events](/funnels/page-events) - Configure page-level events
* [Create Funnel](/funnels/create-funnel) - Build and connect funnels
* [Component Tracking](/essentials/component-tracking) - Understanding component IDs