Debug a Flask (Python) web application in Visual Studio Code

Question

How do I configure Visual Studio Code to debug a Flask (Python) web application?

For example, when I set the debugger in the view function, it should allow me to step

Answer 1

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

In Visual Studio Code, 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 menu File → Preferences → Settings, and then click on the workspace settings tab in the top right corner. Insert the 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 2

Microsoft has added a tutorial to create the launch configuration for Flask debugging: Flask Tutorial -> Run the app in the debugger

So briefly, you must have a section like:

{
    "name": "Python: Flask",
    "type": "python",
    "request": "launch",
    "module": "flask",
    "env": {
        "FLASK_APP": "app.py",
    },
    "args": [
        "run",
        "--no-debugger",
        "--no-reload"
    ],
    "jinja": true
},

In the launch.json file, where the app.py file is your Flask application runner file. After that you must select the proper configuration setting in the dropdown menu of Visual Studio Code. Kind of this:

After that, just hit F5 and start your "journey"!

Answer 3

I found the following solution working for me. I followed the official tutorial with some tweaks in the generated launch.json file.

Visual Studio Code official flask tutorial debugging section

My setup is:

• Python 3.8.3
• Flask 1.1.2
• Visual Studio Code 1.46.0

My current launch.json file is:

{
    // 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: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "app.py",
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "1"  // make sure it is not "0"
            },
            "args": [
                "run",
               // "--no-debugger", Comment out this line
               // "--no-reload"  Comment out this line
            ],
            "jinja": true
        }
    ]
}

By default the generated launch.json file had the

• "FLASK_DEBUG": "0"
• "--no-debugger"
• "--no-reload"

lines, which prevented me from debugging.

Answer 4

To further extend on the answer from Guy, I had to configure a debugger for Visual Studio Code in a Windows environment with Anaconda 2. I did so by using the following:

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

with neuralnets being my Anaconda 2 virtual environment.

Answer 5

Here is my configuration for Flask 0.12, Python 3.6, and Visual Studio Code 1.20

// File "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 the Visual Studio Code debugger
# app.run(port=5000, debug=True) - disables the Visual Studio Code debugger

Answer 6

If you're using venv, make sure you have your virtual environment configured in Visual Studio Code.

For general debugging features such as inspecting variables, setting breakpoints, and other activities that aren't language-dependent, review Visual Studio Code debugging.

Your launch.json file should look something like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flask",
      "type": "python",
      "request": "launch",
      "stopOnEntry": false,
      "pythonPath": "${config:python.pythonPath}",
      "module": "flask.cli",
      "cwd": "${workspaceRoot}",
      "env": {
        "FLASK_APP": "sample",
        "LC_ALL": "en_US.utf-8",
        "LANG": "en_US.utf-8"
      },
      "args": [
        "run",
        "--no-debugger",
        "--no-reload"
      ],
      "envFile": "${workspaceRoot}/.env",
      "debugOptions": [
        "WaitOnAbnormalExit",
        "WaitOnNormalExit",
        "RedirectOutput"
      ]
    }
  ]
}

Set the FLASK_APP environment variable to the name of your application file.

Set --no-debugger to avoid any potential conflicts with the Werkzeug debugger.