Intro to debugging

The Debug panel is your central hub for monitoring and troubleshooting everything that happens in your WeWeb application. Whether you're tracking workflow executions, inspecting variable values, or diagnosing errors, the Debug panel gives you the visibility you need to understand what's happening behind the scenes.

The Debug panel

You can access the Debug panel from by clicking the bug icon in the side nav of the editor.

It contains two main tabs:

• Logs— Track all workflow executions, including their status, timing, and nested runs
• Variables — View and edit the current values of all variables in your project

Logs tab

The Logs tab shows a real-time feed of all workflow executions in your application. Each entry represents a single workflow run, and you can expand it to see detailed information about how it executed.

Filtering logs

When you’re debugging, use the filters at the top of the Logs tab to narrow down what you’re looking at (for example, only failed runs, or only runs from APIs).

Understanding log entries

Each workflow run in the logs panel has a unique appearance based on its type and status:

Color coding by context

• Orange — Interface-related workflows (element workflows, page workflows, etc.)
• Purple — Data & API workflows (APIs and Event Triggers)

TIP

The color coding helps you quickly distinguish between interface workflows and backend workflows at a glance.

Icons by action type

Each workflow type has a unique icon on the left side of its log entry:

Workflow Type	Icon	Description
Element workflow		Workflows triggered from interface elements
Fetch table view		Retrieves rows from a backend view
Function		Functions called from other workflows
API call		Data & API endpoint calls

Status indicators

The appearance of a log entry also shows whether the workflow succeeded or failed:

• Normal appearance — Workflow executed successfully
• Red highlight — Workflow threw an error

Viewing nested runs

Many workflows trigger other workflows as part of their execution. For example, an element workflow might call a reusable workflow, which in turn makes an API request. The logs panel lets you see this entire chain of execution.

To view nested runs:

1. Look for workflow entries that show a subtle expansion indicator
2. Click on the workflow entry to expand it
3. You'll see all the nested runs that occurred as part of that workflow

For example, if an element workflow calls a reusable workflow and an API, expanding the log entry would show both the reusable workflow run and the API request as nested items beneath the main workflow.

This nested view makes it easy to trace the full execution path and understand how different parts of your application interact.

Inspecting a workflow run

Clicking on any workflow in the logs panel opens a detailed view of that specific run. This is where you can see exactly what happened at each step of the workflow.

In the detailed run view:

Visual status indicators

• Green highlight — Action executed successfully
• Red highlight — Action threw an error

Hovering for details

At the bottom of each action in the run view, you'll see a small dot. Hover over this dot to see exactly what that action returned. This is incredibly useful for debugging because you can:

• See the exact data returned by API requests
• Check variable values at each step
• Identify where data isn't matching what you expected
• Understand why conditional logic took a certain path

Viewing nested workflows

Just like in the main logs panel, you can click into nested runs to see their execution details. For example:

1. Click into a reusable workflow to see its actions step-by-step
2. Click into an API request to see its full request and response details
3. Navigate back to the parent workflow to continue your investigation

This action-by-action inspection is your most powerful tool for understanding exactly what your workflows are doing and diagnosing issues.

Variables tab

The Variables tab shows the current values of all variables in your project. This is particularly useful when you're building and testing your interface, as you can see in real-time how variable values affect what users see.

Viewing variables

Click on any variable to expand it and see its current value. For objects and arrays, you can drill down into nested properties to inspect the full data structure.

Editing variables in real-time

One of the most powerful features of the Variables tab is the ability to edit variable values while the editor is running:

1. Click on a variable to expand it
2. Modify its value directly in the panel
3. Any parts of your interface using that variable will update immediately

This is incredibly useful for:

• Testing conditional rendering/display — Change a boolean variable to see elements show/hide
• Previewing different states — Update variables to see how the UI changes for different data values

TIP

Use real-time variable editing to quickly test different scenarios without having to trigger workflows or refresh data. It's the fastest way to validate your interface logic.

Debugging workflow

When you encounter issues in your application, here's a recommended debugging workflow:

1

Check the logs

Look for red-highlighted workflow runs that indicate errors.

2

Expand the failed workflow

See if the error occurred in a nested run.

3

Open the detailed run view

Identify which specific action failed.

4

Inspect action returns

Hover over the dots to see what data each action produced.

5

Check variable values

Switch to the Variables tab to see if data is in the expected state.

6

Edit and test

Modify variable values to test different scenarios.

This systematic approach helps you quickly identify where things went wrong and what data state caused the issue.

Common debugging scenarios

An API request is failing

1. Find the failed workflow in the Logs tab (look for the red highlight)
2. Click to view the detailed run
3. Click into the API request action to see the full request and response
4. Check the status code and error message
5. Verify the request payload is correct

The interface isn't showing the right data

1. Open the Variables tab
2. Find the variable that your interface element is bound to
3. Check if the value matches what you expect
4. Modify the value to test if the interface updates correctly
5. If it updates, the issue is with how the variable is being populated

A workflow isn't running

1. Check the Logs tab to confirm the workflow isn't appearing at all
2. Verify the trigger is set up correctly (check the element or page settings)
3. Try manually triggering the workflow to see if it appears in the logs
4. If it appears when manually triggered, the issue is with your trigger not being fired

Conditional logic is behaving unexpectedly

1. View the detailed run in the Logs tab
2. Look at the conditional action (like an If action or Try/Catch)
3. Hover over the action's return dot to see which branch was taken
4. Use the Variables tab to check the values used in the condition
5. Modify those variable values to test if the logic responds as expected

WARNING

Changes made to variables in the Variables tab only affect your current editor session. They won't persist after you refresh the page or affect your published application.