icon: LiWrench

Title: Debugging Streamlit Apps in VS Code

Understanding Streamlit
Setting up Streamlit Project with pip and venv
Working with Streamlit
Debugging Streamlit Apps in VS Code

Intro
Why Debugging is Essential
Setting Up Python Debugger in Visual Studio Code
Video Walkthrough

Intro

As we build Large Language Model (LLM) applications using Streamlit, it's important to be aware and have the right tools and techniques to streamline our development process. One such tool is the Python Debugger in Visual Studio Code (VS Code).

In this note, we'll explore the importance of being able to debug the Streamlit code, how it enhances our development workflow, and provide a step-by-step tutorial on setting it up in VS Code.

Why Debugging is Essential

✦ A common misunderstanding is that debugging only applicable to lousy programmers or only needed when we have bugs.
✦ Debugging is a fundamental aspect of software development. It allows us to:
1. Identify and Fix Errors:
  - Debugging helps us pinpoint the exact location and cause of errors in our code, making it easier to fix them.
2. Understand Code Flow:
  - By stepping through our code, we can better understanding how it executes, which is especially useful in complex applications like LLMs.
3. Optimize Performance:
  - Debugging can reveal performance bottlenecks (by better understand how the code is executed), enabling us to optimize our code for better efficiency.

Setting Up Python Debugger in Visual Studio Code

Let's dive into the practical steps of setting up and using the Python Debugger in VS Code for our Streamlit app.

Here, we assume we all have installed and set up our Visual Studio code correctly for Streamlit app development. For details on setting up, see 3. Setting Up Streamlit Project with pip and venv from Topic 7.

Install the Python Debugger extension developed by Microsoft.

Step 1: Configure the Debugger

To configure the debugger, we need to create a launch.json file in our project. This file contains the configuration settings for debugging.

Open your Streamlit project in VS Code.
Go to the Run view by clicking on the Run icon in the Activity Bar or by pressing Ctrl+Shift+D.
Click on "create a launch.json file" link.
Select "Python" from the list of environments.
A launch.json file will be created with a default configuration. Modify it to match the following configuration:

{
    "configurations": [
        {
            "name": "Streamlit Debug",
            "type": "python",
            "request": "launch",
            "module": "streamlit",
            "args": [
                "run",
                "${file}"
            ]
        }
    ]
}

Step 3: Set Breakpoints

Breakpoints allow us to pause the execution of our code at specific lines, so we can inspect variables and the program state.

Open the Streamlit app file in VS Code.
Click in the gutter to the left of the line numbers where you want to set a breakpoint. A red dot will appear, indicating the breakpoint.

Step 4: Start Debugging

Now that we have configured the debugger and set breakpoints, we can start debugging.

Go to the Run view.
Select "Python: Streamlit" from the dropdown menu.
Click the green play button or press F5 to start debugging.

VS Code will launch the Streamlit app and pause execution at the breakpoints we set. We can now inspect variables, step through the code, and evaluate expressions in the Debug Console.

Step 5: Inspect Variables and Step Through Code

While debugging, we can use the following controls:

✦ Continue (F5): Resume execution until the next breakpoint.
✦ Step Over (F10): Execute the next line of code, but don't step into functions.
✦ Step Into (F11): Step into functions to see their execution.
✦ Step Out (Shift+F11): Step out of the current function.
✦ Restart (Ctrl+Shift+F5): Restart the debugging session.
✦ Stop (Shift+F5): Stop the debugging session.

We can also hover over variables to see their current values or use the Variables pane to inspect them.

Video Walkthrough

Major Timeline

00:00 - Intro and Setup "Python Debugger" extension
01:45 - Configure the Debugging Session (launch.json)
03:15 - Set Breakpoints in the code
06:46 - Starting the Debugging Session
10:08 - Examine the variables and their values
14:41 - Jupyter Notebook-like Interactive Python session (Debug Console)
16:32 - Navigating the code in Debugging Session (Continue, Step Over, Step into, and etc)