Overview

The logToDebugger action is the action-chain equivalent of a console.log — it writes labelled entries to the Dev Tools → Logs panel in the Builder. Unlike browser console logs, debugger logs are structured, filterable by level, and include the action chain context (which event fired, which component, at what time).

Log entries are only visible in Builder preview mode. They are stripped from production builds during compilation — no log data ever reaches end users or production monitoring systems.

Tip: Use Traces for production observability. For observing action execution and data source calls in production, use Traces — they are designed for production use and integrate with your monitoring stack. logToDebugger is a development-time tool only.

Parameters

Dev Tools Panel

Open the Dev Tools panel by clicking the Dev Tools button in the Builder toolbar (or pressing Ctrl+Shift+D). Switch to the Logs tab to see debugger output. Each entry shows:

• Timestamp (relative to page load)

• Level icon and colour

• Source: the event and component that triggered the action chain

• Message text

• Expandable data payload (if provided)

Use the level filter buttons to show only warn and error entries when debugging complex chains with many debug and info logs.

Step-by-Step Usage Guide

1. Insert a log action in your chain: In the Events panel, click + Add Action and choose Log to Debugger. Place it at the point in the chain where you want to inspect state.

2. Set a descriptive message with binding context: Write a message that identifies what you are logging: "After API call — userId: {{ appUser.id }}, status: {{ ds_fetchUser.status }}". This embeds the current values directly in the log string.

3. Attach a data payload for deep inspection: Set the data field to a variable or expression you want to inspect as a full JSON tree: {{ ds_fetchUser.response }}. This avoids needing to JSON-stringify deeply nested objects into the message.

4. Preview in Builder and check the Logs panel: Switch to Preview mode, trigger the event, then open Dev Tools → Logs. You should see your entry with the timestamp, source, message, and expandable data payload.

Useful Debugging Patterns

Action Chain Execution Tracing

Insert logToDebugger entries at the start, middle, and end of a long action chain with level: "debug" to create a breadcrumb trail. Compare timestamps to identify which step is slow.

Variable State Inspection

Before a conditional action, log the variable being evaluated: "Condition check — var_filterType: {{ var_filterType }}". This reveals whether a condition mismatch is due to an unexpected variable value.

API Response Inspection

Log the full API response immediately after a Trigger Data Source action fires its onResponse callback: set data to {{ ds_myApi.response }}. Expand the entry in the panel to explore the full response structure without needing a separate API client.

Examples

Basic info log with variable values

{ "actionType": "logToDebugger", "payload": { "message": "Form submitted — userId: {{ appUser.id }}, formData: {{ b_createForm.state.values }}", "level": "info" } }

Error log with full API error payload

{ "actionType": "logToDebugger", "payload": { "message": "API call failed — ds_saveRecord", "level": "error", "data": "{{ ds_saveRecord.error }}" } }

Timing trace at start and end of chain

// Action 1: Start of chain { "actionType": "logToDebugger", "payload": { "message": "Chain started — {{ Date.now() }}", "level": "debug" } } // ... other actions ... // Last action: End of chain { "actionType": "logToDebugger", "payload": { "message": "Chain complete — {{ Date.now() }}", "level": "debug" } }