如何在 Flask 项目的 VSCode 中调试 JavaScript？

Question

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?

Answer 1

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.