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 through that function when we hit that route in the browser.
I have already installed the Python extension in Visual Studio Code.
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
I don't use Visual Studio Code for Python development. However, Flask has a really nice debugging option, that allows you to debug from a browser. This is not a solution for Visual Studio Code, but a workaround.
When you define your application, pass the debug = true parameter to enable debugging mode. Then you can debug your code from the browser.
app = Flask(__name__)
app.config['DEBUG'] = True
More information can be found here.
Create startup.py in your project root directory with the following code
# Needed to start the debugger for the Flask application in the 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())
Update the launch.json file in Visual Studio Code by browsing to the Debug tab (Left pane), and then click on the settings icon (Gear icon). Scroll down to the "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"
Go to menu File → Preferences → Settings, and then click on workspace settings in the top right corner. Insert the following field: "python.pythonPath": "${workspaceRoot}/venv/Scripts/python.exe" (If your virtual environment is named something other than venv then replace it with the appropriate value.)
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:
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
lines, which prevented me from debugging.
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.)
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.
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.
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"!
