How do I debug Flask App in VS Code

Question

I've been trying to get the debugger working in VS Code so that I can debug my Flask App. I have tries so many options in the launch.json that I feel there isn't any left.

the following examples did not work: https://github.com/DonJayamanne/pythonVSCode/wiki/Debugging:-Flask

Debug Flask(Python) web application in Visual studio code

Below are my launch.json and setting.json. I have two configurations in the launch file as I was trying multiple variations.

launch.json

"version": "0.2.0",
    "configurations": [
    {
        "name": "Flask",
        "type": "python",
        "request": "launch",
        "stopOnEntry": false,
        "pythonPath": "${config:python.pythonPath}",
        //"module": "flask.cli",
        "program": "${workspaceRoot}/startup.py",
        "cwd": "${workspaceRoot}",
        "env": {
          "FLASK_APP": "${workspaceRoot}/apt-flask.py",
        },
        "args": [
          "run",
          "--no-debugger",
          "--no-reload"
        ],
        "envFile": "${workspaceRoot}/.env",
        "debugOptions": [
          "WaitOnAbnormalExit",
          "WaitOnNormalExit",
          "RedirectOutput"
        ]
    },
    {
        "name": "Python: APT FLask",
        "type": "python",
        "request": "launch",
        "stopOnEntry": true,
        "pythonPath": "${workspaceFolder}/venv/Scripts/python.exe",
        //"program": "${workspaceFolder}/venv/Scripts/flask.exe",
        "module": "flask.cli",
        "cwd": "${workspaceFolder}",
        "env": {
            "FLASK_APP": "${workspaceFolder}/apt-flask.py",
            "DEBUG": 1,
            "LC_ALL": "en_US.utf-8",
            "LANG": "en_US.utf-8"
        },
        "args": [
            "run",
            "--no-debugger",
            "--no-reload"
        ],
        "envFile": "${workspaceFolder}/.env",
        "debugOptions": [
            "WaitOnAbnormalExit",
            "WaitOnNormalExit",
            "RedirectOutput"
        ]
    }
]

settings.json

{
    "python.pythonPath": "${workspaceRoot}/venv/Scripts/python.exe"
}

As far as errors go, I get no errors in the console, only the error within the editor that tells me that the "Debug adapter process has terminated unexpectedly".

I'm not sure what else to try. I currently use Pycharm but was looking for an editor that is more lightweight and as I use VS Code for other things it makes sense to change, so would be nice to finally get this working.

Any help would be brilliant.

Answer 1

As of November 2019 I the found the following useful:

New Way (basic & flakey) - "Old Way" Below is Better

• https://code.visualstudio.com/docs/python/tutorial-flask

Assuming a simple app.py such as:

import flask
app = flask.Flask(__name__)
@app.route('/')
def index():
    return "Hello world!"

And .vscode/launch.json added to your project by adding Python Flask Debug Configuration from the Debug Explorer drop down.

{
    // 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"
            },
            "args": [
                "run",
                "--no-debugger",
                "--no-reload"
            ],
            "jinja": true
        }
    ]
}

The Flask app is effectively run the "new way" from the VS Code debugger [F5].

python -m flask run

Old Way (better)

Miguel suggests running apps the old way, with additional flags, is better in the VS Code debugger.

• https://youtu.be/UXqiVe6h3lA?t=1194
• per https://blog.miguelgrinberg.com/post/setting-up-a-flask-application-in-visual-studio-code.

Add the following to app.py (from above):

if __name__ == '__main__':
    app.run(use_debugger=False, use_reloader=False, passthrough_errors=True)

Modify .vscode/launch.json to look as follows:

{
    // 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": "app",
            "env": {
                "FLASK_APP": "app.py",
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "1"
            },
            "args": [
                // "run",
                // "--no-debugger",
                // "--no-reload"
            ],
            "jinja": true
        }
    ]
}

So the Flask app is effectively run the "old way" from the VS Code debugger [F5].

python app.py