Vs code debug

How to debug a streamlit.io python app using VS Code?

Thank you!

2 Likes

Hi @Nelson_Silva

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 :slight_smile:

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

Hi @Nelson_Silva

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!
![Python: Remote Attach](https://awesome-streamlit.readthedocs.io/en/latest/_images/vscode_python_remote_attach.png)
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"
        ]
    }
]
}
16 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:

  1. click on the run and debug item in the primary sidebar on the left
  2. Click create launch.json
  3. in the launch.json file in the .vscode folder add the code from @bjornba
  4. edit the code for your settings:
    For anaconda under Mac you will find the path/to/streamlit in "/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

8 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