Django Debug Toolbar - How to configure

Hello Coders,

This article explains how to add the popular Debug Toolbar to a 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. To make this article more useful, an open-source sample already configured is provided on GitHub (MIT License). Thanks for reading!

• 👉 Django Add Debug Toolbar - Open-source sample
• 👉 Django Soft UI Dashboard - the initial product (also free)

---

Django Toolbar Set Up

Step #1 - Add django-debug-toolbar to project dependencies

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

Or simply 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('__debug__/', include(debug_toolbar.urls)),  # <-- NEW
   ... 
]

---

Step #3 - Update 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.staticfiles',
   'debug_toolbar',                   # <-- NEW
   ...  
]

MIDDLEWARE = [
   ...
   '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 Django Project

$ python manage.py runserver

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

---

---

Thanks for reading! For more resources please access:

• 👉 Django Debug Toolbar - official docs
• 👉 Django App Generator - A 2nd generation App Builder

Comments

[ui-themes]

The original starter is definetly something I can use in my work.
Thank you for sharing this.

[Sm0ke]

Yw! 🚀🚀

[WebsiteMarket]

Nice & simple! Thank you for this.

[Sm0ke]

Yw! 🚀🚀