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

Question

我有一个与此未解答的问题类似的问题。我还没有被允许对上述问题发表评论。

是否可能，如果可以，如何从 VSCode 中调试 Flask 应用程序的 JS 组件？

我有以下调试配置：

"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
    }
]

据我所知，可以使用 Firefox Developer Edition 的远程调试功能及其自己的配置，如下所示。

关于如何组合这些配置有什么想法吗？或者也许是问题的另一种解决方案？

Answer 1

我知道这已经晚了，但我想我应该把这个留给其他人。

对我来说，这是正确设置“webRoot”属性的问题。这是我的配置

    {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:5001/",
        "webRoot": "${workspaceFolder}/wserver",
    }

“webRoot”应该指向服务器加载的根目录。打开您尝试调试的页面/应用程序，然后在开发人员工具的“源”选项卡中查看根 Web 目录。

鉴于“源”选项卡中的树如下所示；“webRoot”应该指向（在我的例子中）静态文件夹的本地父目录。就我而言“wserver”

本地目录路径：

FlaskApp/wserver/static/scripts/myscript.js

DevTools 源树：

> localhost:5001
  > static
    > scripts
      > myscript.js

从最新版本的 vscode 开始，您不需要安装任何额外的扩展。