Debugging Jinja2 templates in VSCode

Asked 21/8, 2020 at 6:56 Answered 15/7, 2024 at 7:10

So I found the "jinja: "true" option for launch.json and am trying to make jinja debugging work, unsuccessfully so far.

My launch.json is currently:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": " uvicorn debug",
            "type": "python",
            "request": "launch", // set to "test" for "justMyCode" to work. 
            "module": "uvicorn",
            "args":
            [
                "project.asgi:app",
                "--reload",
            ],
            "jinja": true,
            "justMyCode": false
        }
    ] }

I faced a problem that I could not set up breakpoints in jinja template file, but solved it adding "debug.allowBreakpointsEverywhere": true to vscode settings.

My questions are as follows:
a) How is debugging template supposed to work? I add breakpoint anywhere in the template and execution stops there? Or maybe this 'jinja': true means something completely different?
b) Based on the response on a), if breakpoints in jinja template file should work, how to make this happen, as currently they seem to just be ignored?

Thanks a lot!

Methaemoglobin answered 21/8, 2020 at 6:56 Comment(4)

I search the source code and found a jinja debug file in the ms-python extension extensions/ms-python.python-2020.5.86806/pythonFiles/lib/python/old_ptvsd/ptvsd/_vendored/pydevd/pydevd_plugins/jinja2_debug.py it talks about jinja-breakpoints and jinja-lines but I have no clue how to set these – Northwestward 21/8, 2020 at 8:9

for debugpy (used when I launch a python program) there is a similar plugin – Northwestward 21/8, 2020 at 8:22

I added an issue for debugpy: github.com/microsoft/debugpy/issues/381 – Northwestward 21/8, 2020 at 9:9

the initial comment on the issue was "Just set the option and it works". Not for me. So I asked for additional explanation. – Northwestward 24/8, 2020 at 9:13

First I tried the example on the Jinja Wikipedia page

**jinja-test.py**

from jinja2 import Template
with open('example.html.jinja') as f:
    tmpl = Template(f.read())
print tmpl.render(
    variable = 'Value with <unsafe> data',
    item_list = [1, 2, 3, 4, 5, 6]
)

**example.html.jinja**

<!DOCTYPE html>
<html>
  <head>
    <title>{{ variable|escape }}</title>
  </head>
  <body>
  {%- for item in item_list %}
    {{ item }}{% if not loop.last %},{% endif %}
  {%- endfor %}
  </body>
</html>

Make sure the Language type of the template file is set to Jinja. Otherwise you can't set breakpoints.

Because the file was read to a string before given to the Jinja Template class there was no link to the breakpoint set on the template.

Reading the source code of jinja2.Template I found that the preferred way of creating a jinja2.Template is through the jinja2.Environment instance.

After a search I found an other Jinja usage example on SO using the jinja2.Environment a Loader.

**jinja-test-2.py** using a FileSystemLoader

from jinja2 import Environment, FileSystemLoader
env = Environment(loader=FileSystemLoader('.'))
# env = Environment(loader=FileSystemLoader('templates'))
tmpl = env.get_template('example.html.jinja')

print (tmpl.render(
    variable = 'Value with <unsafe> data',
    item_list = [1, 2, 3, 4, 5, 6]))

**jinja-test-2.py** using a PackageLoader

from jinja2 import Environment, PackageLoader
env = Environment(loader=PackageLoader('main', 'templates'))
tmpl = env.get_template('example.html.jinja')

print (tmpl.render(
    variable = 'Value with <unsafe> data',
    item_list = [1, 2, 3, 4, 5, 6]))

Because Jinja uses the module pkg_resources you must add an empty main/__init__.py if you use the PackageLoader. Or you get an Exception

"Can't perform this operation for unregistered loader type"

When you now set a breakpoint in the template and run the application the debugger stops in the template and you can step through with F10.

Make sure the Language type of the template file is set to Jinja. Otherwise you can't set breakpoints.

Northwestward answered 26/8, 2020 at 12:40 Comment(1)

In my case the key here was the switch from loading the template as a string and switching to loading it as part of the Environment - which in hindsight makes complete sense. Also for anyone wondering these are the instructions for changing the language for a file in VS Code: code.visualstudio.com/docs/languages/… – Pademelon 16/3, 2021 at 22:11

I could do it by setting the debug option of VS Code (When you press F5) to Flask Debugging. It will then also debug the .html files or the .jinja files.

VSCode Screenshot of selection

Jadeite answered 15/7, 2024 at 7:10 Comment(0)

Recommended topics

Hot tags