Debug Flask(Python) web application in Visual stud

Question

How do I configure visual studio code to debug Flask(Python) web application ?

For example when I set debugger on view function it should allow me to step through that function when we hit that route in browser.

I have already installed python extension in Visual studio code.

Answer 1

1) Create startup.py in your project root directory with the following code

# Needed to start debugger for flask app in Visual Studio Code IDE import sys import re from flask.cli import main sys.argv[0] = re.sub(r'(-script\.pyw|\.exe)?$', '', sys.argv[0]) sys.exit(main())

2) Update launch.json file in Visual Studio Code by browsing to Debug tab (Left pane) then click on the settings icon (Gear icon). Scroll down to "FLASK" section:

a) Change "program" value to "${workspaceRoot}/startup.py"
b) Change "FLASK_APP" value to "${workspaceRoot}/run.py" (or whatever your main entry point file is"

3) Go to File->Preferences->Settings then click on workspace settings in top right corner. Insert following field "python.pythonPath": "${workspaceRoot}/venv/Scripts/python.exe" (If your virtual environment is named something other than venv then replace it with appropriate value

Answer 2

Here is my configuration for flask 0.12, Python 3.6, and vs code 1.20

// launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flask",
            "type": "python",
            "request": "launch",
            "stopOnEntry": false,
            "pythonPath": "${config:python.pythonPath}",
            "program": "${workspaceRoot}/app.py",
            "env": {
                "FLASK_APP": "${workspaceRoot}/app.py"
            },
            "args": [
                "run"
            ],
            "envFile": "${workspaceFolder}/.env",
            "debugOptions": [
                "RedirectOutput"
            ]
        }
    ]
}

# app.py file
app.run(port=5000)
# Don't use debug=True, because it disables VS CODE debugger
# app.run(port=5000, debug=True) - disables VS Code debugger

Answer 3

We can use the first answer to Linux (Ubuntu) as well with the modifications below.

In VSC add the configuration for flask debug. which you will get from the add button. and it will look like below.

{ "name": "Flask", "type": "python", "request": "launch", "stopOnEntry": false, "pythonPath": "${config:python.pythonPath}", "program": "${workspaceRoot}/app.py", #your start py file "env": { "FLASK_APP": "${workspaceRoot}/app.py" #your start py file }, "args": [ "run" //--no-debug and one more line removed. ], "envFile": "${workspaceFolder}/.env", "debugOptions": [ "RedirectOutput" ] }

Step 2. Go to File->Preferences->Settings then click on workspace settings tab in the top right corner. Insert following field "python.pythonPath": "${workspaceRoot}/venv/bin/python2.7", (If your virtual environment is named something other than venv then replace it with the appropriate value

Answer 4

I don't use VS for python development. However, Flask has really nice debugging option, that allows you to debug from browser. This is not a solution for VS but a workaround.

When you define your app pass debug = true parameter to enable debugging mode. Then you can debug your code from browser.

app = Flask(__name__)
app.config['DEBUG'] = True

more information can be found here

Answer 5

To further extend on answer from Mr. Guy I had to configure debugger for visual studio code in windows environment with Anaconda 2. I did so by using following:

{
"python.pythonPath": "C:\\ProgramData\\Anaconda2\\envs\\neuralnets\\python.exe"
}

with neuralnets being my anaconda 2 virtual environment