Skip to main content
The Debug Window is a powerful development tool for ElasticFunnels that provides real-time monitoring and debugging capabilities for your pages. It helps developers and marketers understand how their funnels, events, and interactions are performing.
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.

​
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

​
📊 Comprehensive Insights

  • 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.

​
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
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.
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
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.

​
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
// 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
// Focus on a specific component
debugWindow.focusComponent('hero-section-123');

// Highlight all components
debugWindow.highlightAllComponents();

// Clear all highlights
debugWindow.clearHighlights();

​
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

​
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: 
// 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
  • 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

​
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:
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.
  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.
The Debug Window only loads when you trigger the hotkey and does not affect page performance for visitors.