Skip to main content

Django - Add Debug Toolbar

Steps to add Debug Toolbar to a Django project

This page explains how to add Django Debug Toolbar to an existing Django project. For newcomers, the Django Debug Toolbar is a configurable set of panels that bumps various information about the current request/response when clicked.

👉 Sample Project: Django Debug Toolbar (saved on GitHub)

Add Debug Toolbar to Django - Tutorial provided by AppSeed.

✅ Step #1​

Add django-debug-toolbar to project dependencies or install via PIP, Poetry or PIPENV

# File: requirements.txt
...
django-debug-toolbar
...

Or install via PIP

pip install django-debug-toolbar

✅ Step #2​

Update Project Routes

# File core/urls.py

import debug_toolbar   # <-- NEW

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),

    path('__debug__/', include(debug_toolbar.urls)),  # <-- NEW

    path("", include("authentication.urls")),
    path("", include("app.urls"))
]

✅ Step #3​

Update Project Settings

# File core/settings.py
...
from decouple import config
from unipath import Path
import dj_database_url

import mimetypes                      # <-- NEW


BASE_DIR = Path(__file__).parent

INSTALLED_APPS = [
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'debug_toolbar',                   # <-- NEW
    'app'
]

MIDDLEWARE = [
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'debug_toolbar.middleware.DebugToolbarMiddleware',         # <-- NEW
]

INTERNAL_IPS = [                     # <-- NEW
    '127.0.0.1',                     # <-- NEW
]                                    # <-- NEW

def show_toolbar(request):           # <-- NEW
    return True                      # <-- NEW

DEBUG_TOOLBAR_CONFIG = {                     # <-- NEW
    "SHOW_TOOLBAR_CALLBACK" : show_toolbar,  # <-- NEW
}                                            # <-- NEW

if DEBUG:                                                      # <-- NEW
    import mimetypes                                           # <-- NEW
    mimetypes.add_type("application/javascript", ".js", True)  # <-- NEW

✅ Step #4​

Execute the migration

$ python manage.py makemigrations
$ python manage.py migrate

✅ Step #5​

Start the App (the debug toolbar should be visible)

$ python manage.py runserver

At this point, the Debug Toolbar should be visible on the right side for all pages.

Add Debug Toolbar to Django - Tutorial provided by AppSeed.

✅ In Summary​

Django Debug Toolbar is a third-party debugging and profiling tool for web applications built using the Django web framework. It provides a set of panels and tools to help developers analyze and optimize the performance of their Django applications during development. The toolbar is typically used in a development or debugging environment and is not meant for use in production.

Key features of the Django Debug Toolbar include:

  1. Request/Response Panels: It displays detailed information about the HTTP request and response, including headers, status codes, and cookies.

  2. Database Queries Panel: This panel shows the SQL queries executed during the processing of a request, along with execution times. It helps identify potential performance bottlenecks related to database queries.

  3. Templates Panel: Developers can see which templates were used to render a particular page, how many times they were rendered, and the time taken for each template rendering.

  4. Cache Panel: This panel provides insights into how caching is utilized in the application, showing cache hits and misses, and helps in optimizing caching strategies.

  5. Logging Panel: It displays log messages generated by the application, which can be useful for debugging and tracing the flow of a request.

  6. Signals Panel: This panel shows Django signals that were emitted during the request/response cycle, helping developers understand how different parts of the application communicate.

  7. Profiling: Django Debug Toolbar can also be used to profile the code, allowing developers to identify slow code sections and optimize them.

  8. Settings: Developers can access Django settings from within the toolbar, making it easy to verify the configuration during development.

✅ In Summary​

To use Django Debug Toolbar, you typically need to install it as a Django app, add it to your project's settings, and configure it for your specific environment. It should be used with caution and should not be enabled in production, as it can potentially expose sensitive information and slow down the application.

Django Debug Toolbar is a valuable tool for developers working on Django applications, as it provides insights into the inner workings of the application and helps identify performance issues and bugs during the development process.

✅ Resources​