VSCode debugging Django (python) website and javascript with breakpoints in both

I was looking for a way to make VSCode debugger to stop on breakpoints both in python and javascript while debugging Django app.

Python and templates breakpoints work well with django launch.json settings, but javascript breakpoints are ignored.

 

 

What I found is a workaround (I don’t know if this is just a standard way to do this, but feels like workaround), by using the `compouns` option in the launch.json.

It is basically an ability of VSCode to debug two apps in parallel. For example when you have a server/client app and you want to debug both simultaneously.

 

Anyway, for Django, I used a regular django config, and a chrome web debug for javascript:

 

 

	{
	"version": "0.2.0",
	"configurations": [
	{
	"name": "Django",
	"type": "python",
	"request": "launch",
	"stopOnEntry": false,
	"program": "${workspaceFolder}/manage.py",
	"args": [
	"runserver""
	],
	"django": true
	},
	{
	"type": "chrome",
	"request": "launch",
	"name": "Chrome",
	"url": "http://localhost:8000",
	"webRoot": "${workspaceFolder}"
	}
	],
	"compounds": [{
	"name": "Django/Web",
	"configurations": ["Django", "Chrome"]
	}
	]
	}

view raw launch hosted with ❤ by GitHub

 

 

A new option is then available in the Run and Debug dorpdown menu: "Django/Web"

This way it works great.