Part 2. Debugging Django Templates

Prepare an example

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

   

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

   If you are planning to add other apps to the project in future, it is recommended to create a separate subdirectory for each application in the templates directory:

   • Right-click the automatically created templates directory and select New | Directory:

     

   • Type poll and press Enter.

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 Control+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 MyDjangoProject/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 .

   The name of the run/debug configuration in the drop-down, the button, and the Debug tool window are marked with a dot, which means that the run/debug configuration is active:

   

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: