Debugging your Streamlit application using VSCode

Python is a great language for scripting, quick backend prototyping and data science analytics, but when it comes to developing a front-end for your APIs, it used to take some extra effort to write that Django Template or Flask Template. But all that changed when web app prototyping was drastically accelerated with the introduction of libraries like Streamlit, Dash and of-late FastHTML.

I will be covering all of the above in a later post, but September is ending and I wanted to make a quick post to debug Streamlit apps using VS Code.

For the purposes of this post, I will assume you already have a Streamlit app called app.py.

Steps to debug your Streamlit app using VSCode -

• Create a virtual environment , say “streamlit_calc”. You can create a virtual environment easily using uv. I mentioned this in an earlier post -

  Virtual environments using 'uv'

• Install Streamlit in this environment.

  

• Create a folder called .vscode in your project folder and under it, create a file called launch.json

The following should be the contents of your launch.json

 
{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "debug streamlit",
            "type": "debugpy",
            "request": "launch",
            "program": "./streamlit_calc/Scripts/streamlit.exe",  
            "args": [
                "run",
                "app.py"
            ]
        }
    ]
}

Now add a breakpoint somewhere in your code that you want to debug at.

To start the app, click on “Start Debugging”

Let’s say your breakpoint is at “Subtract”. This is fairly a simple example, but obviously it’s just to illustrate a point -

As you can see, when Subtract is selected as the app is running, our breakpoint is hit.

Now you can evaluate the expression on VSCode and debug away easily!

---

Thanks for reading Everything Python! Subscribe for free to receive new posts and support my work. If you liked this post, tell a friend!