Failing to debug JavaScript in VS code flask application with blueprints

[zuberek]

Describe the bug I have a flask web app that is using flask blueprints. I'm trying to debug the front end JS with breakpoints from within VS code. However, when launching the debugging session, the breakpoints are becoming unbounded.

To Reproduce My project structure is such that I have JS files in several places, and when launching the app, Chrome DevTools have them mapped to these:

WebApp/src/app_static/js/globals.js : http://127.0.0.1:5000/app_static/js/globals.js
WebApp/src/blueprints/blueprintA/app_static/js/blueprintAFunction.js : http://127.0.0.1:5000/static/blueprintA/js/blueprintAFunction.js

The launching script is here WebApp/run.py
I am running this on Windows but within WSL's VS code.
Similar question was asked here but it doesn't work for me.

Log File vscode-debugadapter-f8f0c184.json.gz

VS Code Version: 1.95.2

Additional context I tried manually setting the sourceMap within the debugger like explained in the README. My launch.json config looks like this

          {
              "name": "Launch Chrome",
              "request": "launch",
              "type": "chrome",
              "url": "http://localhost:5000",
              "webRoot": "/mnt/c/Users/userA/code/WebApp/src",
              "sourceMapPathOverrides": {
                  "/static/*": "${webRoot}/blueprints/*/app_static/*",
                  "/app_static/*": "${webRoot}/app_static/*",
              }
          },

I can debug from within Chrome DevTools and when the app hits a breakpoint from there, it even stops in VS code, showing me the environment and everything. This works even if I launch with silly webRoot and sourceMapPathOverrides values, but of course is not what I want.

Having this more general version from this Medium article also doesn't work

"sourceMapPathOverrides": {
        "*": "${webRoot}/*"
      }

I have asked this question on stackoverflow also

[connor4312]

You want a webroot of ${workspaceFolder}/Annotator/annotator

You aren't using sourcemaps, so sourceMapPathOverrides aren't relevant for you

[zuberek]

Hi, thank you for your very quick answer.

When I run the debugging session with the following config

        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:5000",
            "webRoot": "${workspaceFolder}/Annotator/annotator",
        },

The breakpoints work only for the files in the Annotator/annotator/app_static/js folder but not for the js files in the blueprints folders, for example Annotator/annotator/blueprints/annotation/app_static/js

The trace from this launch vscode-debugadapter-897edd06.json.gz

Thank you for your help

[connor4312]

you probably want to add a section like "pathMappings": { "/static": "${workspaceFolder}/annotator/Annotator/annotator/blueprints" }

[zuberek]

Hi, again thank you for your quick responses. And sorry but I'm still struggling to get this to work. All this is caused by me running it from withing WSL, right?

I have used your code (changed pathMappings to pathMapping (no s) and tried various combinations.

Can you maybe point me to some documentation/code I could use to understand how the mapping works instead of spamming you with questions 😅. Is there a way to see what are the paths the debuggers is trying to map to? If I'm using pathMapping, what is webRoot for? I tried to look for more information on this but can't find anything approchable. Plenty of people asked similar questions in the issues but the answers don't seem to work for me.