DEV Community

Cover image for Django Debug Toolbar - How to configure
Sm0ke
Sm0ke

Posted on • Updated on • Originally published at docs.appseed.us

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 Debug Toolbar - Open-source sample provided by AppSeed.


Django Toolbar Set Up

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

# File: requirements.txt
...
django-debug-toolbar
...
Enter fullscreen mode Exit fullscreen mode

Or simply install via PIP

$ pip install django-debug-toolbar
Enter fullscreen mode Exit fullscreen mode

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
   ... 
]

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step #4 - Execute the migration

$ python manage.py makemigrations
$ python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

Step #5 - Start the Django Project

$ python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

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


Django Debug Toolbar - Open-source sample provided by AppSeed.


Thanks for reading! For more resources please access:

Top comments (4)

Collapse
 
uithemes profile image
ui-themes

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

Collapse
 
sm0ke profile image
Sm0ke

Yw! 🚀🚀

Collapse
 
crearesite profile image
WebsiteMarket

Nice & simple! Thank you for this.

Collapse
 
sm0ke profile image
Sm0ke

Yw! 🚀🚀