Django Debug Toolbar - How to configure
Tags: django, webdev, debug
Published: 2021-07-16 15:23:18

---
title: Django Debug Toolbar - How to configure
published: true
description: How to add the Debug Toolbar module to a Django project.
tags: django, webdev, debug
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pufjiayc0yvvhoaipzo.jpg
canonical_url: https://docs.appseed.us/content/how-to/django-add-debug-toolbar
---
Hello Coders,

This article explains how to add the popular **Debug Toolbar** to a Django project. For newcomers, the [Django Debug Toolbar](https://docs.appseed.us/content/how-to/django-add-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](https://github.com/app-generator/django-add-debug-toolbar) - Open-source sample
- 👉 [Django Soft UI Dashboard](https://appseed.us/product/soft-ui-dashboard/django/) - the initial product (also free)

![Django Debug Toolbar - Open-source sample provided by AppSeed.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3lp9kcqxs6l2icmgvmc.jpg)

--- 

## Django Toolbar Set Up

> **Step #1** - Add django-debug-toolbar to project dependencies
```txt
# File: requirements.txt
...
django-debug-toolbar
...
```

Or simply install via PIP

```bash
$ pip install django-debug-toolbar
```

---

> **Step #2** - Update project routes

```python
# 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


```python
# 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 

```bash
$ python manage.py makemigrations
$ python manage.py migrate
```

---

> **Step #5** - Start the Django Project

```bash
$ python manage.py runserver
```

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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3lp9kcqxs6l2icmgvmc.jpg)

---

> **Thanks for reading!** For more resources please access:

- 👉 [Django Debug Toolbar](https://django-debug-toolbar.readthedocs.io/en/latest/installation.html) - official docs
- 👉 [Django App Generator](https://app-generator.dev/django/) - A 2nd generation App Builder