Skip to main content
This page describes how to debug the frontend template engine: the Debug Window Templates tab, console debug flags, inspecting scope, and verifying updates.

​
Debug Window — Templates tab

The easiest way to inspect template behavior is the Templates tab in the Debug Window. It shows template-if results and lets you inspect any element for its template bindings and child tree.
Open the Debug Window with Ctrl + Shift + F12 (Windows/Linux) or Command + Shift + F12 (Mac) on an ElasticFunnels page, then click the Templates tab.
When the Templates tab is active, the template processor sends debug events to the window (no URL or sessionStorage flag needed). There is no performance cost when the tab is closed.

​
Events (New vs Previous)

The Events section shows: Each template-if event shows:
  • The condition (or “(else)”) and the result (e.g. true, false, branch index).
  • (unchanged) when the engine skipped re-rendering because the selected branch was the same.
template-if-error events show the failing condition and the error message (e.g. from an invalid expression). Use this when:
  • A template-if branch never shows — check which condition is chosen and the result.
  • You want to see whether template-if runs are being skipped (unchanged) after an action.

​
Inspect element (Pick element)

Inspect element lets you click a node on the page and see its template bindings and child tree.
  1. Click Pick element.
  2. Click any element on the page (outside the debug window).
  3. The panel shows:
    • Template bindings on that node: data-condition, data-each, ef-text/data-ef-text, ef-value/data-ef-value/data-template-value, ef-src/ef-href/…, data-ef-var-path, data-ef-var-template, data-ef-cloak, data-ef-debug-if-condition, data-ef-debug-if-result, and event bindings (@click, data-ef-on:click, etc.).
    • A tree of child nodes (tag, id, classes, and any template attributes).
When scope updates (e.g. after cart or form changes), the picked element’s panel refreshes so you see updated bindings and tree. Use Clear pick to deselect. data-ef-debug-if-condition and data-ef-debug-if-result are set by the template engine when the Templates tab is open: they show which template-if condition and result produced that element. They appear in the bindings list and in the tree for nodes that are the first element of a rendered template-if branch.

​
Console debug flags

The template processor (templateProcessor.js) also supports console-only debug flags. When set, it logs to the browser console with a [ef-template] prefix. These are independent of the Debug Window.

​
1. efTemplateDebug

Enables general template debug logs (e.g. directive runs, condition evaluation, var updates). How to enable:
  • URL: Add ?efTemplateDebug to the page URL (e.g. https://yoursite.com/checkout?efTemplateDebug).
  • Session storage: In the console or a script:
    Reload. To disable: sessionStorage.removeItem('efTemplateDebug');
What you’ll see: Messages such as getEffectiveContext, template-if evaluate, template-if: skip (branch unchanged), template-foreach: skip (unchanged), update: var-path / var-template / data-ef-text, runAllUpdates: start/done, updateElementsForPath. Use this when you need console output (e.g. in CI or without the Debug Window).

​
2. efTemplateTraceContext

Enables stack traces when getEffectiveContext is called (throttled to avoid flooding). How to enable: Add ?efTemplateTraceContext to the URL or set sessionStorage.setItem('efTemplateTraceContext', '1'); and reload. Use this when you need to see the call stack for context resolution.

​
Inspecting scope

​
Read window.efScope

In the browser console:
Check that cartItems, checkout, query, errors, etc. are present and have the shape you expect. After an action (e.g. add to cart, apply coupon), inspect again and confirm the data changed.

​
After an update

After something that should update the UI:
  1. Confirm efScope has the new data.
  2. If the UI did not update, verify the expected efScope path actually changed and that your template expressions reference that path (or a parent path).

​
Verifying updates

​
Manual trigger

To force a full re-run of the template engine (e.g. after editing efScope in the console):
If the UI updates after this, the data was already correct and you likely had a path/expression mismatch.

​
Path-scoped update

If you know the exact scope path that changed (e.g. checkout.shipping_same_as_billing):
Then check that only the relevant part of the UI updates.

​
Common issues

​
Summary

  • Debug Window → Templates tab — Events (New/Previous) show template-if results and errors; Pick element shows bindings and tree for any node. Refreshes on scope update. No URL flag needed when the tab is open.
  • Console flags — efTemplateDebug (URL or sessionStorage) for [ef-template] logs; efTemplateTraceContext for getEffectiveContext stack traces.
  • Inspect window.efScope before and after actions to confirm data.
  • Optionally trigger notifyScopeUpdated() or notifyScopePathsUpdated([path]) manually during troubleshooting.
For full syntax and behavior, see Overview, Syntax, Cart, and Checkout.