How to effectively use Bubble.io's debugging tools to fix runtime issues: Step-b

Click the Preview button in the top-right corner of your Bubble editor to open your app in a new browser tab. In the preview URL bar, you will see a floating Debugger toolbar at the bottom of the page. If it is not visible, add ?debug_mode=true to the end of your preview URL. The toolbar shows several buttons: Step, Slow, Normal, and a dropdown for inspecting elements. Click the Step button to enable step-by-step mode, which pauses before each workflow action so you can inspect values.

With step mode enabled, trigger a workflow in your app (for example, click a button that creates a record). The Debugger will pause before the first action and display the workflow name, the current action, and all the data values being used. Click the Next button to advance one action at a time. For each action, the Debugger shows the inputs (what data is being passed), the outputs (what was created or changed), and any Only when conditions. If an action was skipped due to a condition, the Debugger shows it as 'Skipped' with the condition value.

In the Debugger toolbar, click the dropdown labeled 'Inspect' or use the element inspector button (magnifying glass icon). Then click any element on the page. A panel appears showing the element's current data source value, all conditional formatting states, custom states attached to it, and whether it is visible or hidden. This is invaluable for debugging why a Repeating Group shows no data (check its data source), why a text displays the wrong value (check its dynamic expression), or why an element is hidden (check its conditions).

Go back to the Bubble editor and click the Issue Checker icon in the top toolbar (it looks like a warning triangle). The Issue Checker scans your entire app for structural problems: missing data sources, broken references, disconnected workflows, and type mismatches. Each issue is listed with a description and a clickable link that takes you directly to the problematic element or workflow. Fix issues from top to bottom — some issues are caused by others above them. Red issues are errors that will prevent functionality; yellow issues are warnings that may cause unexpected behavior.

Click the Logs tab in the left sidebar of the editor. Server Logs show every server-side action that has run, including backend workflows, database operations, and API calls. Each log entry shows the timestamp, workflow name, action, workload units consumed, and any error messages. Use the search and filter options to narrow logs by workflow name or time range. For backend workflows that fail silently, this is often the only way to discover what went wrong. Note that free plans retain logs for only 6 hours — check logs promptly after testing.

Return to your preview with the Debugger enabled. Test your app with different scenarios: logged out vs logged in, empty vs populated data, first-time vs returning user. For each scenario, step through workflows and inspect element conditions. Pay special attention to Only when conditions on workflow actions — when a condition evaluates to 'no', the action is skipped but subsequent actions still run (which can cause errors if they depend on the skipped action's result). Use the element inspector to verify that conditional formatting on elements matches your expectations at each state.