Streamlit Debugging in VSCode

Spaces
1

While Spaces is my first go to for any ML demonstration, sometimes debugging and getting gradio and streamlit projects running locally is the only way to easily debug a project that you need quick turn around time circles with editing code.

For that purpose I am using VSCode.

Every once in awhile I set up a new machine and find that I struggle with getting the debuggers to work with my desired python verrsion. Currently I use 3.10.x and note that the Ubuntu linux version running in Spaces (unless you override with new cool Docker feature) is python 3.8.

A common request is how to debug into gradio and streamlit optimally.

Here is the launch.json file you would add to VSCode projects to easily debug streamlit:

‘’’
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: Debugging in Visual Studio Code
“version”: “0.2.0”,
“configurations”: [
{
“name”: “debug streamlit”,
“type”: “python”,
“request”: “launch”,
“program”: “C:\Users\aaron\AppData\Local\Programs\Python\Python310\Scripts\streamlit.exe”,
“args”: [
“run”,
“app.py”]
“console”: “externalTerminal”,
“justMyCode”: true
}
]
}
‘’’

Gradio typically is easier to debug and often too the streamlit.exe/streamlit.cmd pattern is often blocked by high security environments which whitelist executables. One change however usually guarantees easier local debug and that is changing the terminal to use externalTerminal rather than the default. In some environments my debug start fails unless I do that and it has the added benefit of showing the print statements and output in a visible extternal console window.

launch.json (in .vscode folder) would be like below for gradio:

{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Python: Current File”,
“type”: “python”,
“request”: “launch”,
“program”: “${file}”,
“console”: “externalTerminal”
}
]
}

Cheers and happy debugging!

–Aaron

2

There is also a pattern you can set with gradio where it senses changes to files and restarts debugging. That is useful as well and follows a similar pattern to streamlit where you shell the gradio app:

PS C:\Users\aaron\Desktop\WikipediaReferenceFinder> gradio app.py

Launching in reload mode on: http://127.0.0.1:7860 (Press CTRL+C to quit)

Watching: ‘C:\Users\aaron\AppData\Local\Programs\Python\Python310\lib\site-packages\gradio’, ‘C:\Users\aaron\Desktop\WikipediaReferenceFinder’

The launch.json file for that would look similar to streamlit:
{
“version”: “0.1.0”,
“configurations”: [
{
“name”: “debug gradio with auto reload on file save,
“type”: “python”,
“request”: “launch”,
“program”: “C:\Users\aaron\AppData\Local\Programs\Python\Python310\Scripts\gradio.exe”,
“args”: [
“app.py”
]
}
]
}

Thanks to huggingface.co discussion forums - great way to share tips and tricks! Thanks HF!

–Aaron

3

Fixed formatting for cleaner streamlit - still using this: {
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: Debugging in Visual Studio Code 22
“version”: “0.2.0”,
“configurations”: [
{
“name”: “debug streamlit”,
“type”: “python”,
“request”: “launch”,
“program”: “C:\Users\aaron\AppData\Local\Programs\Python\Python310\Scripts\streamlit.exe”,
“args”: [
“run”,
“app.py”
],
“console”: “externalTerminal”,
“justMyCode”: true
}
]
}