CODEWITHSUNDEEP
javascriptvisual-studio-codeflaskvscode-debuggerjavascript-debugger
Jan Dąbrowski
Jan Dąbrowski

Reputation: 1

How to debug JavaScript in VS code flask application with blueprints?

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. 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. I don't want to debug back end python but front end JS.

Similar question was asked here but it doesn't work for me.

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.

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

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

Thanks guys.

Upvotes: 0

Views: 30

Answers (0)

Related Questions