PyCharm 2023.1 Help

Part 2. Debugging Django Templates

Before you start, ensure that Django is specified as the project template language.

Prepare an example

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

    Creating a Django app
  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:

      Creating a subdirectory inside of the templates directory
    • Type poll and press Enter.

  3. Open the file poll/ 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:

    Template not found

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

    Create a template

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

    Creating the index.html file
  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/, the value of hello is world. So, we expect the rendered page to contain w o r l d.

  8. Open the MyDjangoProject/ 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:

    url patterns

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:


The Django server run/debug configuration is created automatically. If required, you can edit it by selecting the Edit Configurations command in the run/debug configuration list on the main toolbar:

Edit configurations

For example, you can choose to open a browser window automatically when the configuration is launched:

Run/Debug configuration for a Django server

Launch a run/debug configuration

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

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

    Debugging a Django template: launch debug configuration
  2. Click the link in the Debug tool window. A browser window will open with a Page not found message:

    Error '404' in a browser

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

  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:

Breakpoint hit

The Debug tool window for Django applications has all the functions, similar to pure Python scripts:

  • Stepping through the program

    The stepping toolbar is active, and the stepping buttons are available. For example, you can click Step over and see that the value of the char variable changes to the next letter of the word world.

    See the Step through the program section for details.

  • Evaluating expressions

    Press Alt+F8, or click Evaluate expression on the Stepping toolbar. In the dialog that opens, type the expression you wish to evaluate, and click Evaluate:

    Evaluate expressions

    See the Evaluate expressions section for details.

  • Watching variables

    Suppose, you'd like to always keep an eye on a certain variable of a template, say, char. How to do that?

    At the top of the Debugger tab of the Debug tool window, type the name of the variable of interest, and press Add to watch:

    Add a watch for a variable

    The value of the variable will be displayed at the top of the variables list through the rest of the debugging process. See the Watches section for details.

That's it... What has been done here? Let's repeat:

  • You've created a Django project, with a template in it.

  • You've added a breakpoint to this template.

  • You've launched the Django server run/debug configuration in the debug mode.

  • Having hit the breakpoint, you've learned how to step through your template, evaluate expressions, and add watches.

The next step is also intended for the Professional edition users - this is Debugging JavaScript.

Last modified: 16 August 2022