Btukfyl

I have a Django project that uses some React apps (via bundling from Webpack) besides other non-React javascript files. I would like to debug any javascript file inside Visual Studio Code (without using DevTools F12 from the browser).

There are some sites that explain how to debug javascript files using the Debugger for Chrome extension, but I could not find anywhere how to set this for a typical Django project structure.

I have followed the steps indicated in the answer of post Cannot debug in VSCode by attaching to Chrome, but instead of running serve -p 8080, I run python manage.py runserver from the console (by default it runs in port 8000).

Then, I have added the following launch configuration in 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:///": ""}

    }

}

When I launch it, it goes to the correct url but it does not catch any breakpoint set in the javascript files. It says "unverified breakpoint" for any kind of javascript file:

${workspaceFolder} points to the root of my Django structure. Hence, I would expect that all the Javascript files inside this root (even at different subfolders) should be catched by the extension. However, I am only able to debug a file (non-React) if I set to a webRoot to a specific subfolder (e.g. "webRoot"="${workspaceFolder}/apps/app1/static"). I can debug neither javascript files in other locations (like "app2" subdirectories) nor the React files, which are served by Webpack.

For the sake of completeness, I leave herein the working directory structure, where you can see the location of the javascript files:

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

...

It is also worth noting that when running "Launch Chrome" configuration, I cannot debug the python files (they work when running "Python: Django" configuration).

To sum up, the main questions are:

• Is it possible to debug any kind of javascript file in different applications of a Django project?


• Could we debug both Python and Javascript files at the same time?