Debug mode & dev tooling
Toggling the staging API and developer logging via the debug-mode theme setting.
Debug mode & dev tooling
🛠 Dev
Debug mode is a theme setting (debug_mode) that switches the store into a developer-friendly
state. It is the main lever for testing against staging without touching production.
What it does
When debug_mode is on (via snippets/development-mode.liquid):
window.theme.api.baseis set to the dev/staging API (api_dev_base_url) instead of production.window.theme.api.debugis set totrue.window.theme.api.debugHeadersis populated with forwarding headers (e.g.X-Forwarded-For).- Developer logging is emitted to the console (e.g.
[CBP] Development mode enabled).
When off (production), these are unset. Always guard access in code:
window.theme.api?.debugHeaders || {}Turning it on/off
It's a checkbox under Theme settings → Advanced in the Shopify admin (see Theme settings).
Debug mode must be OFF on the live store. If it's left on in production, the live store will talk to the staging API and behave unpredictably for real customers. Verify it's off after any deploy.
Quick diagnostics in the browser
When investigating an issue, the browser console exposes the live state:
window.theme.api.base— which API the store is using (confirms prod vs staging).window.theme.api.debug— whether debug mode is on.window.theme.sessionManager— auth/token state.window.theme.vehicleDetails— the currently selected vehicle.window.theme.postcodeEntry— the current postcode/region.
See Diagnosing with debug mode for a step-by-step triage.