Part 2. Debugging Django Templates

Enable the Django plugin

This functionality relies on the Django plugin, which is bundled and enabled in PyCharm by default. If the relevant features are not available, make sure that you did not disable the plugin.

1. Press Ctrl+Alt+S to open settings and then select Plugins.

2. Open the Installed tab, find the Django plugin, and select the checkbox next to the plugin name.

Prepare an example

1. Create a Django project demoDjangoProject, with the application poll.

   

2. PyCharm creates the project structure and populates it with the necessary files.

3. Open the file poll/views.py. It already has the import statement and the invitation to create views for your application:

   from django.shortcuts import render # Create your views here.

   Let's define a view for the application's home page:

   from django.shortcuts import render def index(request): return render(request, 'poll/index.html', context={'hello': 'world'})

4. index.html is marked as an unresolved reference:

   

   Press Alt+Enter or click and choose to create the missing template:

   

   Create Template dialog appears, showing the read-only template name (Template path field), and a list of possible template locations (Templates root field):

   

5. Select the template directory, where the new template will be created.

   The Templates root field provides a list of possible locations for the new template. This list includes the template directories specified in the Project Structure page of the IDE settings Ctrl+Alt+S plus all templates folders located inside of app directories, if any.

6. Click OK.

   An empty .html file is created in the specified location

7. In templates/poll/index.html, type the following code to print out the value of the hello variable one character after another:

   {% for char in hello %} {{ char }} {% endfor %}

   According to the context provided in poll/views.py, the value of hello is world. So, we expect the rendered page to contain w o r l d.

8. Open the demoDjangoProject/urls.py file.

   In this file find urlpatterns and add the following code to define which view should be used to render the index page:

   path('index/', index),

   Do not forget about the import statement!

   from poll.views import index

   You should end up with the following:

   

So, the example code is ready.

Set a breakpoint

• Add a breakpoint to the template file. To do that, open the file templates/poll/index.html and click the gutter:

  

Launch a run/debug configuration

1. Launch the selected run/debug configuration in the debug mode by clicking .

   

2. Click the link in the Debug tool window. A browser window will open with a Page not found message:

   

   It happens because we didn't specify a path for '/' in the file urls.py

3. Let's add /index in the browser address bar and press Enter.

The PyCharm window appears. You can see that the breakpoint has been hit, and the Debug tool window contains the current values of the variables in the Threads & Variables tab: