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

【问题标题】：How to debug JavaScript in VSCode on a Flask project?如何在 Flask 项目的 VSCode 中调试 JavaScript？
【发布时间】：2021-02-23 23:53:37
【问题描述】：

我对这个未回答的one 有类似的问题。我还不能对上述问题发表评论。

是否可以，如果可以，如何从 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
    }
]

据我所知，可以根据here 自行配置使用 Firefox 开发者版的远程调试功能。

关于如何组合这些配置有什么想法吗？或者也许可以完全解决这个问题？

【问题讨论】：

同样的问题，虽然我使用过 Chrome 断点，但我想知道是否可以使用 vscode 放置断点，它会有很大帮助。
也许支持第一个问题可能有助于让某人回答。也许有一种更简单的方法可以做到这一点，我们只是有点迷茫。
关于这个@Randolfo 有什么新想法吗？

标签： javascript flask firefox visual-studio-code remote-debugging

【解决方案1】：

我知道这已经晚了，但我想我会把它留在这里给其他人。

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

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

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

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

本地目录路径：

FlaskApp/wserver/static/scripts/myscript.js

DevTools 源树：

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

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

【讨论】：