Debug Templates with Visual Studio Code

Using Django Getting Started
1

The “Django Tutorial in Visual Studio Code” has a chapter “Use the debugger with page templates”. It explains in detail how to set brakepoints in templates, which sounds quite handy. Unfortunately, it doesn’t work for me.

This is my launch.json file:

{
    "configurations": [
        {
            "name": "Python: Django",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/manage.py",
            "args": [
                "runserver"
            ],
            "django": true
        }
    ]
}

Everything else including debugging and setting breakpoints in views.py or wherever else works fine, but in template-files, I can’t set breakpoints: when I click left of the line numbers in a template-file, nothing happens, no red dot occurs.

Is anybody here able to set breakpoints in templates? Do you have an idea what’s wrong with my configuration? Thanks!

I am currently using MacOS Version 12.1, Python 3.8.7, Django 3.2.9 and Visual Studio gives the following information:

Version: 1.63.2
Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3
Date: 2021-12-15T09:37:28.172Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 21.2.0
2

Try adding the "justMyCode": false setting directly under the "django": true line.

3

If Ken’s advice doesn’t help, try disabling any third-party Django extensions in Code. I recall a similar issue solved by disabling one specific extension but I forget which one. Sorry.

Edit: found it! vscode-django-template

4

Thank you all for your advice. I tried everything and in the end, it turned out: the Django extension was the culprit. The problem has been known for a while.

Before that, I tried to disable suspect extensions – without success. I had to learn, that – in this case – it wasn’t enough to restart Visual Studio Code, but I had to disable and re-enable the Python extension to get it working properly again.

Now the code in the templates looks a bit stale, but the ability to examine the variables should be worth it, I guess.

5

The other extension Django Template, mentioned by @speno, has one advantage: the breakpoints can be set as soon as you disable this extension – without dis- and re-enabeling the Python extension and without restart. So you can have both, nice looking source code in templates and setting breakpoints. Well, not simultaneously, but as a workaround it’s okay to disable Django Template temporarily.

6

Just to add that, this happens due to the file association of the .html files. VS Code does seem to allow debugging only when the file language mode is Html (html) (option from the change language mode). Therefore, there is no need to enable/disable any extension, you just need change the language mode of the file from Django Template to HTML and breakpoints will be enabled.

1 Like
7

Hi, you can add in your vscode settings.json file user
"debug.allowBreakpointsEverywhere": true,
and you can add breakpoints in django templates without change the language mode.

2 Likes