如何在VSCode上调试Flask项目中的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的远程调试功能和自己的配置。

有没有关于如何组合这些配置的想法？或者也许是解决问题的其他方法？

- aik3e

---

我也遇到了同样的问题，之前我一直使用 Chrome 的断点调试功能。不过现在我在想，能否在 vscode 中进行断点调试，这样会非常方便。 - Randolfo

也许给第一个问题点个赞可以帮助吸引回答者。也许有更简单的方法，我们只是有点迷失。 - Randolfo

Randolfo，你有任何新的想法吗？ - aik3e

Answer 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

开发人员工具源树：

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

截至最新的vscode版本，您无需安装任何额外的扩展。

- giyoda