Menu
I have a similar question to this unanswered one. I am not yet allowed to comment on said question.
Is it possible, and if so, how can I debug the JS components of my Flask app from within VSCode?
I have the following debug configuration:
"version": "0.2.0",
"configurations": [
{
"name": "Python: Flask - Dev",
"type": "python",
"request": "launch",
"module": "flask",
"env": {
"PIPENV_VENV_IN_PROJECT":"1",
"FLASK_APP":"run.py",
"FLASK_ENV":"development",
"FLASK_DEBUG":"1",
"TEMPLATES_AUTO_RELOAD" : "1"
},
"args": [
"run"
],
"jinja": true
},
{
"name": "Python: Flask - initDB",
"type": "python",
"request": "launch",
"module": "flask",
"env": {
"PIPENV_VENV_IN_PROJECT": "1",
"FLASK_APP": "run.py",
"FLASK_ENV": "development",
"FLASK_DEBUG": "1",
},
"args": [
"run",
"--no-reload" // Use for initial dev DB deploy
],
"jinja": true
}
]
From what I gather, it is possible to use the remote debugging feature of Firefox Developer Edition with its own configurations as per here.
Any ideas on how to combine these configurations? Or perhaps another solution to the problem altogether?
679
To run or debug a simple app in VS Code, select Run and Debug on the Debug start view or press F5 and VS Code will try to run your currently active file. However, for most debugging scenarios, creating a launch configuration file is beneficial because it allows you to configure and save debugging setup details.
run() method instead of the flask run command, pass debug=True to enable debug mode. Tracebacks are also printed to the terminal running the server, regardless of development mode. If you're using PyCharm, VS Code, etc., you can take advantage of its debugger to step through the code with breakpoints.
The JavaScript debugger of VS Code supports source maps that help debugging of transpiled languages, for example, TypeScript or minified/uglified JavaScript. With source maps, it's possible to single step through or set breakpoints in the original source.
This will automatically load the Flask project with the active directory set to flask-tutorials In the VS Code IDE, hit the keys Ctrl+Shift+D. It is to Run the Flask App in Debug mode. As we are performing this task for the first time, we will be allowed to choose among two options. One is to Open a file which can be debug or run.
Open ~/FlaskApp with VS Code. You should see all of your python code, git files, and a new folder called “.vscode”. **Optional** I recommend setting up your project settings to filter out a few files that clutter up the UI. To do so, press “⌘,” or equivalent to open the User Settings.
Now you can dig deeper with VS Code’s debug tools, or just hit F5 to resume your code and carry on. The debugging approach you just learned works on any JavaScript file. But if you have a block of JavaScript code inside an HTML file, you’re more limited.
VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to JavaScript.
I know this is late, but I thought I'd leave this here for others.
For me it was a matter of setting the "webRoot" property correctly. Here is my configuration
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:5001/",
"webRoot": "${workspaceFolder}/wserver",
}
"webRoot" should point to the root directory that the server loads. Open the page/app you are trying to debug and look in the Sources tab in developer tools to see the root web directory.
Given the tree in the Sources tab looks like the following; "webRoot" should point to the local parent directory of (in my case) the static folder. In my case "wserver"
Local directory path:
FlaskApp/wserver/static/scripts/myscript.js
DevTools Sources tree:
> localhost:5001
> static
> scripts
> myscript.js
As of the latest version of vscode you don't need to install any extra extensions.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
