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

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.