How to debug a streamlit.io python app using VS Code?
Thank you!
The poor mans version is to just set a breakpoint() in the code.
You can see an example below where iāve set the ābreakpoint()ā and can inspect the selection in the terminal below.
I donāt know how to integrate it with VS Code though. I never use that because I find it slow 
1 Like
Thank you for the previous answer.
After some reading, here is the description on how to debug Streamlit apps using VS CODE:
In your streamlit/Python code add:
import ptvsd
-> 5678 is the default attach port in the VS Code debug configurations
print(āWaiting for debugger attachā)
ptvsd.enable_attach(address=(ālocalhostā, 5678), redirect_output=True)
ptvsd.wait_for_attach()
-> use: breakpoint(), to set a manual breakpoint using code, or just enable a breakpoint using the mouse on the code line (as usual)
-> Next run you Streamlit as usual: streamlit run test.py
-> Next, you just need to press the play button on VS CODE, and then select the Remote Attach: debug PTVSD optionā¦
#Done!
2 Likes
Your description got me started writing some suggestions on how to use VS Code for developing Streamlit applications. See https://awesome-streamlit.readthedocs.io/en/latest/vscode.html
Thanks.
5 Likes
Hey @Marc, @Nelson_Silva,
Thank you for this very useful discussion and article.
I tried applying the solution for the integrated debugger on it only to find ptvsd is no longer supported: https://github.com/microsoft/ptvsd/issues/1682#issuecomment-732793614
I did manage to get it to work by using debugpy in a similar way to what they do here https://dockerquestions.com/2020/09/22/debugging-python-in-docker-container-using-debugpy-and-vs-code-results-in-timeout-connection-refused/:
I changed the code in app_debug_vscode.py to use debugpy like this:
"""Use this module for development with VS Code and the integrated debugger"""
import debugpy
import streamlit as st
import app
# pylint: disable=invalid-name
markdown = st.markdown(
"""
## Ready to attach the VS Code Debugger!
for more info see the [VS Code section at awesome-streamlit.readthedocs.io]
(https://awesome-streamlit.readthedocs.io/en/latest/vscode.html#integrated-debugging)
"""
)
if not debugpy.is_client_connected():
debugpy.listen(5679)
debugpy.wait_for_client()
markdown.empty()
app.main()
Also I had to change the port to 5679 (here and on launch.json) because 5678 refused to work saying it was already in use. Maybe the other debugger was trying to run there? Figure with a fresh restart 5678 should work.
Again, thanks for your help!
2 Likes
@Marc
Can u please update the article awesome-streamlit
It still works as described in the article in vscode /win 10/ py3.8 today
Any updated comments would be highly useful
For anyone stumbling over this thread. My launch.json below. Put a breakpoint inside run.py and hit F5. Simple solution that works for me running on wsl.
{
"version": "0.1.0",
"configurations": [
{
"name": "debug streamlit",
"type": "python",
"request": "launch",
"program": "/path/to/streamlit", // /home/xx/tmp/venv/bin/streamlit",
"args": [
"run",
"run.py"
]
}
]
}
17 Likes
Thanks @bjornba, You saved me a lot of time (Y)
2 Likes
Dude brilliant! That was great advice!
Here are all steps you need to do in Vscode:
- click on the run and debug item in the primary sidebar on the left
- Click
create launch.json - in the launch.json file in the .vscode folder add the code from @bjornba
- edit the code for your settings:
For anaconda under Mac you will find thepath/to/streamlitin"/Users/[username]/opt/anaconda3/envs/[envname]/bin/streamlit"
and under args change the run.py to your filename.
It worked perfectly! Big thanks!
7 Likes
Nice!!
An alternate configuration I have found with Google:
{
"version": "0.2.0",
"configurations": [{
"name": "Python: Streamlit",
"type": "python",
"request": "launch",
"module": "streamlit",
"env": {
"STREAMLIT_APP": "app.py",
"STREAMLIT_ENV": "development",
"AWS_PROFILE": "mega_root",
"PYTHONPATH": "${workspaceRoot}/src",
},
"args": [
"run",
"/Users/projects/streamlit/app.py"
],
"jinja": true
}
]
}
3 Likes
Hi,
Itās good practice to use a remote debugger for server apps. Iāve built a little wrapper for debugpy (pip install debugpy) which you can use. The code is available in my gist here. Full instructions included on creating the launch.json file and adding two lines of code to your top level Streamlit app.
Benefits: (a) You can use this approach to debug locally and into apps running in local or remote dockers. (b) You can launch the debugger anytime after your Streamlit app has started, and (c) You can control the wait_for_client flag to pause and wait (=True) for you to start the debugger. The debugger wrapper is enabled by making flag=True.
I never build any apps without this.
HTH,
Arvindra
1 Like
Use this for any app you may have.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Python: Current File",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal",
"justMyCode": true
},
{
"name": "Python: Streamlit",
"type": "python",
"request": "launch",
"module": "streamlit",
"env": {
// any .env variables you may have
"STREAMLIT_APP": "${file}",
"STREAMLIT_ENV": "development",
},
"args": [
"run",
"${file}"
],
"jinja": true,
"justMyCode": true
}
]
}
2 Likes
You are overcomplicating this.
Itās a matter of calling python3 -m streamlit run file.py. that can be done by for any VS code file. Itās agnostic to venv as well and works with remote kernels.
{
"name": "streamlit debug",
"type": "python",
"request": "launch",
"module": "streamlit",
"args": ["run", "${file}"],
"justMyCode": true,
}
This will in practice call
streamlit run full_path_to_file
9 Likes
Worked like a charm, ty!
Wow that was so much easier! Itās so obvious too (but not so obvious that I didnāt go down the other rabbit holes first). Thank you, I appreciate you.
1 Like
quality advice! thank you!
1 Like
Great tip. Adding that āprogramā: might need to be adjusted in case you are using a virtual environment.
Hey all, any tips on how to get this working with a poe task, specifically the one below?
[tool.poe.tasks.run-otel-infisical]
cmd = "infisical run --env=dev -- opentelemetry-instrument --logs_exporter none streamlit run web/index.py --server.port $port --browser.gatherUsageStats false --server.runOnSave true --server.fileWatcherType auto"
args = [{ name = "port", default = 8501, type = "integer" }]
env = { WATCHDOG_LOG_LEVEL = "ERROR", PYTHONPATH = "${PWD}/web/:${PWD}/source/:${PWD}/../docq-extensions/source/" }
Thanks a ton for this !
Hi I just find this thread, but even I config my launch.json like below, it is not work (breaking point in my program not stopping)
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Python: Current File",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal",
"justMyCode": true
},
{
"name": "Streamlit",
"type": "python",
"request": "launch",
"module": "streamlit",
"console": "integratedTerminal",
"justMyCode": true,
"jinja": true,
"args": [
"run",
"${file}",
]
}
]
}
1 Like