使用VS Code在多应用程序React Django项目中调试Javascript文件

Question

我有一个Django项目，除了其他非React javascript文件之外，该项目还使用了一些React应用程序（通过Webpack捆绑）。我想调试Visual Studio Code中的所有javascript文件（不使用浏览器中的DevTools F12）。

有些站点解释了如何使用Debugger for Chrome扩展程序调试javascript文件，但是我找不到任何地方如何为典型的Django项目结构设置此。

我已按照帖子Cannot debug in VSCode by attaching to Chrome的回答中指示的步骤进行操作，但是我没有从控制台运行serve -p 8080（默认运行在端口8000上），而是运行了python manage.py runserver。

然后，我在launch.json中添加了以下启动配置：

{
    "version": "0.2.0",
    "configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:8000",
        "webRoot": "${workspaceFolder}",            
        "sourceMaps": true,
        "sourceMapPathOverrides": {
            "webpack:///./": "${webRoot}/",
            "webpack:///src/": "${webRoot}/",
            "webpack:///./~/": "${webRoot}/node_modules/",
            "webpack:///": ""}
    }
}

当我启动它时，它会转到正确的URL，但不会捕获javascript文件中设置的任何断点。它对任何类型的javascript文件都说“未验证的断点”：

${workspaceFolder}指向我的Django结构的根。因此，我希望该根目录下的所有Javascript文件（即使在不同的子文件夹中）也应由扩展名捕获。但是，如果我将webRoot设置为特定的子文件夹（例如"webRoot"="${workspaceFolder}/apps/app1/static"），则只能调试文件（非反应）。我既不能调试其他位置（例如“ app2”子目录）中的javascript文件，也不能调试Webpack提供的React文件。

为了完整起见，我在这里保留了工作目录结构，您可以在其中查看javascript文件的位置：

apps/
    app1/
        migrations/
        static/
            app1/
                css/
                js/
                    react_app/
                    other javascript files
                    ...
        templates/
        templatetags/
        __init__.py
        ...
    app2/
    ...
    __init__.py
project_name/
    __init__.py
    celery.py
    settings.py
    urls.py
    wsgi.py
manage.py
requirements.txt
.eslintrc.json
.babelrc
package.json
webpack.config.js
...

还值得注意的是，在运行“启动Chrome”配置时，我无法调试python文件（在运行“ Python：Django”配置时它们可以工作）。

总而言之，主要问题是：

• 是否可以在Django项目的不同应用程序中调试任何类型的javascript文件？
• 我们可以同时调试Python和Javascript文件吗？