In this article, we’re going to talk about how we can do Django debugging. Let’s look at an important technique that is required in web development and then move on to adding the Debug Toolbar library.
What is debugging
Regardless of professionalism, every developer deals with bugs – it’s part of the job. Debugging bugs is not an easy task; initially it takes a lot of time to detect a bug and to fix it. Consequently, every developer needs to know how to fix bugs. In Django, the debugging process can be greatly simplified. You just need to install and plug Django Debug Toolbar into your application. Now that we know why debugging is so important, let’s set it up in the project.
Preparing the application for the demo
The example code is in the repository on GitLab. To use the debugging toolbar, we need a website. If you have your own project, you can use it. Otherwise, create a new one and add the following view and corresponding path. Commands to create a new application:
$ pip install django $ django-admin startproject debug-tool $ cd debug_tool $ python manage.py startapp app
# app/views.py from django.http import HttpResponse def sample_view(request): html = 'Django sample_view
‘ return HttpResponse(html)
Make sure the
tag is present. Otherwise, the debugger tool will not display on pages whose templates do not have this tag. The URL path for the code will be:
# debug_tool/urls.py from app import views as app_views urlpatterns = [ path('admin/', admin.site.urls), path('sample/', app_views.sample_view), ]
Now you’ll be able to repeat after me.
Django Debug Toolbar
Let’s take a look at the tools that are presented in the toolbar:
- Version: Provides the version of Django we are using.
- Time: Reports the time it took to load the web page.
- Setting: Shows page settings.
- Request: Shows all requests – views, files, cookies, etc.
- SQL: A list of database queries.
- Static Files: Provides information about static files.
- Templates: Provides information about templates.
- Cache: Provides information about existing cache.
- Loggin: Shows the number of logs logged.
Installing the Debug Toolbar in Django
Now let’s install the library and configure everything you need for it. Follow the step-by-step instructions:
1) Install the library
django-debug-toolbar, use the
pip install command. Run the following code in a terminal/OS shell:
pip install django-debug-toolbar
2) Add to INSTALLED_APPS
In settings.py, add the following line to the
INSTALLED_APPS section. Make sure that
debug_toolbar is added after
# debug_tool/settings.py INSTALLED_APPS = [ ... 'debug_toolbar', ]
Also make sure that the following line
STATIC_URL = '/static/' is present in the settings.py file. It is usually at the end of the module and does not need to be added. If it’s not there, just add it to the end of the file.
3) Import into urls.py
To use the Debug Toolbar, we have to import its paths. Hence, in urls.py add the code:
# debug_tool/urls.py ... from django.conf import settings from django.urls import path, include # urlpatterns = [.... if settings.DEBUG: import debug_toolbar urlpatterns = [ path('__debug__/', include(debug_toolbar.urls)), ] + urlpatterns
Make sure that
DEBUG is set to
TRUE in settings.py to make everything work. This is what my urls.py file looks like: Debug ToolBar urls.py
4) Connect MiddleWare
Add the middleware toolbar
debug_toolbar.middleware.DebugToolbarMiddleware, to the
MIDDLEWARE list in settings.py.
# debug_tool/settings.py ... MIDDLEWARE = [.. ... 'debug_toolbar.middleware.DebugToolbarMiddleware', ] ...
5) Mention INTERNAL_IPS
Django Debug Toolbar is only displayed if the
INTERNAL_IPS list contains the application’s IP. To develop on a local computer, add IP 127.0.0.1 to the list.
# debug_tool/settings.py ... INTERNAL_IPS = [ '127.0.0.1', ]
INTERNAL_IPS list does not already exist, add it to the end of settings.py. At this point we have finished connecting the debug panel, now let’s check how it works.
Displaying the Django Debug Toolbar
After adding all the code, go to 127.0.0.1:8000/sample/ in your browser. If you see the sidebar as in the image, it worked! If not, check if any of the above code snippets are missing from your files. That’s it, the toolbar will appear on the right side of the page every time it loads. The official documentation in English is here.