Debug Dash callbacks#

The Dash framework provides a set of debug tools (as described in the official Dash Dev Tools documentation) that are specialized for debugging your solution’s frontend interface, particularly focusing on Dash callbacks and component rendering.

This section describes how to use the Visual Studio Code (VS Code) development environment to attach a debugger inside Dash callbacks.

Attention

Debugging code inside Dash callbacks using the remote debugger disables the tools described in the Dash Dev Tools documentation. Only one debugging method can be active at a time.

Prerequisites#

Before setting up debugging, ensure you have:

Installed the Python extension in VS Code (see Prerequisites)
Opened a single solution (see Single-solution debugging) or a multi-root workspace with multiple solutions (see Multi-solution debugging)
Verified the .vscode/launch.json file at the root of the solution folder (see Prerequisites)
Verified that the .vscode/launch.json file contains the Python: Remote Attach Dash debug configuration

Debugging workflow#

Step 1: Run in debug mode#

SAF CLI

Run the solution in UI debug mode using SAF CLI:

Open the solution folder directly in VS Code:
```
code path/to/my-solution
```
Start the solution with the --ui-debugger flag:
```
saf run --ui-debugger
```

Solutions Manager

Run the solution in UI debug mode using Solutions Manager:

Open Visual Studio Code.
In the Activity Bar, click the Solutions Manager icon.
In the Solutions Manager pane, expand the Run Solution view.
Provide the following values:
1. Select the solution you want to debug.
2. When selecting your run options, ensure that UI debugger is selected.
3. Provide other values as needed. For more information, see Run a solution on desktop.
Run the solution.

Click the Run solution button. Alternatively, you can copy the command under Solution run command and run it in the terminal.

Result

When the solution is run, it performs the following actions:

Enables Python debugging in the solution UI process.
Starts debugpy listening on port 5725 or the next available port and logs the port to the terminal.
Disables the Dash/Flask debugger because it is incompatible with debugpy.

The solution runs in UI debug mode and the output is displayed in the terminal.

Tip

Instead of using the --ui-debugger flag, you can enable UI debug mode by setting the GLOW_UI_PYTHON_DEBUGGING environment variable to any value. This starts solutions in UI debug mode automatically, eliminating the need to specify the --ui-debugger flag each time you run a solution.

Windows

PowerShell

$env:GLOW_UI_PYTHON_DEBUGGING = "True"

Command Prompt

set GLOW_UI_PYTHON_DEBUGGING=True

Linux/macOS

export GLOW_UI_PYTHON_DEBUGGING=True

Step 2: Attach the debugger#

Wait for the solution UI server to start. The output should contain a line similar to:
```
INFO - Starting Solution UI...
```
Open the Run and Debug by pressing Ctrl+Shift+D.
In the Search configurations menu, select Python: Remote Attach Dash (if it is not already selected.)
Press F5 or click the green Start Debugging button to attach the debugger.
Validate that the debugger is attached by checking the VS Code status bar and Debug Console.

Result

After attaching the debugger, you should see:

The VS Code status bar shows: Python: Remote Attach (<name-of-your-solution>).
The Debug Console indicates a successful connection.
The Run and Debug panel shows that the solution UI process is running.

Step 3: Set a breakpoint#

Set a breakpoint in a Dash callback by clicking the gutter to the left of the line numbers:
Invoke the Dash callback using the solution UI.

This causes the debugger to pause at the breakpoint in the callback.

Result

When the breakpoint in the Dash callback is hit:

The debugger pauses execution at the breakpoint and highlights the paused line in the editor.
The Call Stack pane shows the current stack and the Variables/Locals panes are populated for the active frame.
Step Over / Step Into / Continue controls are enabled and you can evaluate expressions in the Debug Console.

UI debugger port#

Automatic port selection#

By default, SAF GLOW Engine uses port 5725 for frontend debugging.

If multiple processes are run simultaneously or the port is used by another non-GLOW process, then SAF GLOW Engine attempts to find an available port dynamically.

To find the port being used, check the GLOW UI logs:

Find the line containing #### UI server listening for debug on port: 5725 ####.
Note

The UI server logs the debug port on startup. Look for a line like:
```
#### UI server listening for debug on port: 5725 ####
```
If the port differs, update your “Python: Remote Attach Dash” configuration or set GLOW_DEBUG_UI_PORT to a fixed value.

If the port is different than 5725, then modify your Python: Remote Attach Dash debug configuration accordingly, setting the port key with the value obtained from the log line:

{
  "name": "Python: Remote Attach Dash",
  "type": "python",
  "request": "attach",
  "connect": {
    "host": "localhost",
    "port": "$PORT_FROM_LOG"
  },
  "justMyCode": false
}

Manual port selection#

You can specify a particular debug port by setting the GLOW_DEBUG_UI_PORT environment variable and then modifying the Python: Remote Attach Dash debug configuration to refer to it.

Set the GLOW_DEBUG_UI_PORT environment variable to the port you want to use.

In the launch.json file found in the .vscode folder at the root of the project, set the key value of the port to the value of GLOW_DEBUG_UI_PORT:

{
  "name": "Python: Remote Attach Dash",
  "type": "python",
  "request": "attach",
  "connect": {
    "host": "localhost",
    "port": "${env:GLOW_DEBUG_UI_PORT}"
  },
  "justMyCode": false
}

If the specified port is unavailable, SAF GLOW Engine cannot use it, resulting in a connection error and subsequent shutdown.