Preview & Debugging
URL parameters and tools for previewing variants and debugging the SDK
Copy this guide and your current settings as a prompt for your AI agent.
Preview agent promptSee the guide, code and settings included when you copy.
This page covers the URL parameters and in-browser utilities available for development and QA workflows. None of these mechanisms are intended for production use with real visitors.
On this page
01Disable Coframe (?cf_disabled)
The generated installation snippet includes an early-exit guard that runs before
the SDK loads. When the page URL matches the regex /cf_disable/, the snippet
logs a warning and returns immediately — the SDK is never fetched or executed:
[Coframe] Disabled via URL parameterThe regex matches any URL that contains the string cf_disable, so both
?cf_disable and ?cf_disabled work. This guard lives in the install-script
IIFE itself; it is not handled by the edge worker or the browser SDK.
Practical use — clean LCP measurement. Because the SDK is never loaded,
adding ?cf_disabled to a page URL gives you a baseline page-load measurement
with zero Coframe overhead. Use this when benchmarking Core Web Vitals or
comparing your page’s Largest Contentful Paint with and without the SDK active.
For a step-by-step guide to verifying your integration before go-live, see Testing and Validation.
02Preview specific variants (?cf_variant_id)
Append coframe_variant_id as a query parameter to force the SDK into preview
mode for one or more variants:
https://yoursite.com/landing?coframe_variant_id=var_abc123To preview multiple variants at once, supply a comma-separated list:
https://yoursite.com/landing?coframe_variant_id=var_abc123,var_def456Two things happen when this parameter is present:
- Edge:
extractVariantIdsFromUrlreadscoframe_variant_idfrom the resolvedconfig.currentUrland builds a preview project from KV instead of the live project data. - Browser SDK:
resolveConfigreadscoframe_variant_idfromwindow.locationand setsisPreviewVariant = true, which suppresses event sending so preview sessions do not pollute experiment data.
03Force event sending in preview (coframe_should_send_events)
When you are using coframe_variant_id to preview a variant but also need to
verify that analytics hooks fire correctly, add the override parameter:
https://yoursite.com/landing?coframe_variant_id=var_abc123&coframe_should_send_events=trueThe value must be the string true. When set, resolveConfig calls
setForceSendEvents(true), which causes the event-gate check to return true
regardless of isPreviewVariant. This lets you exercise the full
bulkCallbackV2 → analytics pipeline against a preview variant without
affecting live experiment traffic.
Note: use this in a controlled QA environment. Events sent this way are delivered normally and will appear in your project’s event stream.
04Debug logging
Coframe.debug utilities
window.Coframe.debug is an object of debugging utilities. It is populated
during SDK initialisation and is not part of the public API. Available utilities:
| Utility | Description |
|---|---|
logs |
SDK warning/error log history (LogEntry[]). |
project |
Resolved project payload received from the edge. |
frames |
Active frames after audience/URL filtering. |
laneClaims |
Mutual-exclusion lane assignments for this visitor. |
getSelector(el) |
Compute a UniversalSelector for a DOM element. |
getElement(sel) |
Resolve a UniversalSelector back to a DOM element. |
getElementUniversal(sel) |
Broader element resolver. |
waitForCmd(predicate) |
Await a CFQ command interactively from the console. |
flushQueuedEvents() |
Manually flush the pending event batch. |
queuedEvents |
Reference to the pending events array. |
shouldSendEvents() |
Check the current event-gate state. |
querySelector(sel) |
SDK DOM query wrapper. |
Open your browser DevTools console and inspect window.Coframe.debug to
access these. For example:
// View SDK log history
window.Coframe.debug.logs
// Check whether events would be sent right now
window.Coframe.debug.shouldSendEvents()
// Flush pending events immediately
window.Coframe.debug.flushQueuedEvents()Checking the network for cf.js
The SDK is delivered as a single script response from the edge worker (the
cf.js request). In the browser DevTools Network tab, filter for cf.js
or cf-static to find this request. A successful response includes both the
baked-in project JSON and the compiled SDK bundle in one HTTP response,
eliminating a separate fetch round-trip. Inspect the response body to confirm
the project data is present and the status code is 200.
See also:
Coframe Global — full reference for
window.Coframe properties and Coframe.debug utilities.
Debug Checklist — step-by-step
checklist for diagnosing SDK and integration issues.
# Preview & Debugging URL parameters and tools for previewing variants and debugging the SDK This page covers the URL parameters and in-browser utilities available for development and QA workflows. None of these mechanisms are intended for production use with real visitors. ## Disable Coframe (?cf_disabled) The generated installation snippet includes an early-exit guard that runs before the SDK loads. When the page URL matches the regex `/cf_disable/`, the snippet logs a warning and returns immediately — the SDK is never fetched or executed: PLAINTEXT ``` [Coframe] Disabled via URL parameter ``` The regex matches any URL that contains the string `cf_disable`, so both `?cf_disable` and `?cf_disabled` work. This guard lives in the install-script IIFE itself; it is not handled by the edge worker or the browser SDK. Practical use — clean LCP measurement. Because the SDK is never loaded, adding `?cf_disabled` to a page URL gives you a baseline page-load measurement with zero Coframe overhead. Use this when benchmarking Core Web Vitals or comparing your page’s Largest Contentful Paint with and without the SDK active. For a step-by-step guide to verifying your integration before go-live, see [Testing and Validation](../docs/testing-and-validation.html). ## Preview specific variants (?cf_variant_id) Append `coframe_variant_id` as a query parameter to force the SDK into preview mode for one or more variants: PLAINTEXT ``` https://yoursite.com/landing?coframe_variant_id=var_abc123 ``` To preview multiple variants at once, supply a comma-separated list: PLAINTEXT ``` https://yoursite.com/landing?coframe_variant_id=var_abc123,var_def456 ``` Two things happen when this parameter is present: - Edge: `extractVariantIdsFromUrl` reads `coframe_variant_id` from the resolved `config.currentUrl` and builds a preview project from KV instead of the live project data. - Browser SDK: `resolveConfig` reads `coframe_variant_id` from `window.location` and sets `isPreviewVariant = true`, which suppresses event sending so preview sessions do not pollute experiment data. ## Force event sending in preview (coframe_should_send_events) When you are using `coframe_variant_id` to preview a variant but also need to verify that analytics hooks fire correctly, add the override parameter: PLAINTEXT ``` https://yoursite.com/landing?coframe_variant_id=var_abc123&coframe_should_send_events=true ``` The value must be the string `true`. When set, `resolveConfig` calls `setForceSendEvents(true)`, which causes the event-gate check to return `true` regardless of `isPreviewVariant`. This lets you exercise the full `bulkCallbackV2` → analytics pipeline against a preview variant without affecting live experiment traffic. Note: use this in a controlled QA environment. Events sent this way are delivered normally and will appear in your project’s event stream. ## Debug logging Coframe.debug utilities `window.Coframe.debug` is an object of debugging utilities. It is populated during SDK initialisation and is not part of the public API. Available utilities: Utility | Description | `logs` | SDK warning/error log history (`LogEntry[]`). | `project` | Resolved project payload received from the edge. | `frames` | Active frames after audience/URL filtering. | `laneClaims` | Mutual-exclusion lane assignments for this visitor. | `getSelector(el)` | Compute a UniversalSelector for a DOM element. | `getElement(sel)` | Resolve a UniversalSelector back to a DOM element. | `getElementUniversal(sel)` | Broader element resolver. | `waitForCmd(predicate)` | Await a CFQ command interactively from the console. | `flushQueuedEvents()` | Manually flush the pending event batch. | `queuedEvents` | Reference to the pending events array. | `shouldSendEvents()` | Check the current event-gate state. | `querySelector(sel)` | SDK DOM query wrapper. | Open your browser DevTools console and inspect `window.Coframe.debug` to access these. For example: JS ``` // View SDK log history window.Coframe.debug.logs // Check whether events would be sent right now window.Coframe.debug.shouldSendEvents() // Flush pending events immediately window.Coframe.debug.flushQueuedEvents() ``` Checking the network for cf.js The SDK is delivered as a single script response from the edge worker (the `cf.js` request). In the browser DevTools Network tab, filter for `cf.js` or `cf-static` to find this request. A successful response includes both the baked-in project JSON and the compiled SDK bundle in one HTTP response, eliminating a separate fetch round-trip. Inspect the response body to confirm the project data is present and the status code is `200`. See also: [Coframe Global](../docs/coframe-global.html) — full reference for `window.Coframe` properties and `Coframe.debug` utilities. [Debug Checklist](../docs/debug-checklist.html) — step-by-step checklist for diagnosing SDK and integration issues.