Installing Django Debug Toolbar with Wagtail CMS

Hey there. In this lesson we're going to learn how to install Django Debug Toolbar. Now if you're unfamiliar with Django Debug Toolbar, I'm going to tell you this. This is one of the single greatest tools that you will ever use when it comes to a website. It gives you everything you possibly need. And let's just walk through this real quick. So it gives you a version. So it automatically tells you what Django version you were using, what Python version you're using, your T your debug toolbar, tag it, Wagtail Core. So That initial check that we're going to do right after this quick little intro here, we don't technically need to do that anymore because Django debug toolbar will do that for us. Time, this is how long it's taking to render this page out for me. It gives you all of your settings in here. Most of these are largely configurable through your settings.

py or rather in this video it's base. py Headers your entire request. Uh it even tells you all of your SQL queries. It breaks them down for you, tells you how long they're taking. This is a really good one because sometimes some pages load really, really slow and you're like, whoa, why is it loading so slow? And then you open up your debug toolbar and you realize there's 1200 queries in there. What static files are you using? What template files are you using? For this one we're using homepage and we're also using base. html. You can also toggle that context so you can see what's being passed in here, also along with base. html. So if you're ever wondering, oh hey, where do I get messages from? Or are messages even being passed into my template, you can check that out here

Uh cache, is there any caching in here? Signals, logging, uh, and then you can also, if you wanted to, you could enable intercept redirects for um next and successive requests. We're not going to do that. And that is debug toolbar in a nutshell. Now the biggest thing that I use this for is SQL queries to make sure that my site is always running nice and fast when it's traveling to the database to get information and coming back with the information, but also your templates. Because as your site grows and grows and grows, you're going to want to you're going to want to extend your templates. And as your site gets bigger, you're going to have more templates. And as you start working with other people, you're going to have more templates. And you're going to have more included files. and you're not going to know where everything is coming from.

And one of the quickest ways to basically open up any page and say, oh where is this where is this little section down here coming from? You simply open up your debug toolbar Click on templates and you can see all of your templates in there. That's where naming convention comes in. So if everything is named explicitly, very cleanly, you can simply look at it and say, oh, this is loading a home page. And because it's from the home directory, chances are that is its own application. And it's extending our main base. html file. So if I needed to change any CSS or uh upgrade my jQuery version I could go into base. html all right without further ado let's go ahead and let's get started installing Django debug toolbar Now if you're just dropping into this video series now, I just want to do a quick check-in

to make sure that we're all sort of on the same page. I'm going to quickly activate my pip environment and I'm just going to do a pip freeze. for Django so we can see what version of Django I'm using. I'm using 2. 1. 5 and let's also look at the version of Wagtail I'm using Wagtail 2. 4, my pip environment is pip19. 0. 1, and my Python version is 3. 7 Just doing a periodic check-in just to make sure that if you are running into any problems in the future, chances are it's probably a version issue. For instance, some things are not going to work on Wagtill 2. 2 versus 2. 4 because 2. 4 has newer features. So we want to install this tool called Django Debug Toolbar.

So let's give this a Google. Let's type in Django debug toolbar. And we could go to the repo, uh, but let's go straight to the documentation because we want installation docs. So install guide and essentially we're just going to follow this guide. Now there are a couple caveats in here and I'm going to walk you through these but for the most part this is really largely copy and paste-ish So let's just dive right into this. So the first thing we need to do is we need to install Django debug toolbar. So open up your terminal and you want to type pip install Django debug

to a bar and this will give you version 1. 11. Mine says it's already satisfied because I already technically have this installed. And that's okay. We just need to make sure that it is installed. Now let's take a look at what version I currently have. Pip freeze, grep, and let's look for the word toolbar. I'm using Django debug toolbar version 1. 11. So once you have that installed, we need to run into step number two, which is We need to put this into our installed apps. So where do our installed apps live in our site? Well, we have a few different settings and maybe let's just explore this in here. Let's make this a little bigger. Uh settings we have base, dev and production. So let's not do anything with production because we're not in production.

Dev is where we're going to be putting our stuff and base is where all of our settings currently live. Now if we scroll down we can see that there's installed apps. And if we head back over to our browser, our next step is to put Django debug toolbar into our installed apps. It also wants us to put Django Contrib static files. So if you're coming from a different build, not the default Wagtail one, you're going to want to add this one. But the default Wagtail build always comes with Django Contrib static files. as an installed app. But let's take a look at this anyways. So I'm in my installed apps in base. py. This is in the settings folder and here I have Django Contrib static files, but I also have a series of other things I have Wagtail Users, Snippet, Search, Admin, Core.

I have an app called Home and Search. Home is where we've been doing all of our work so far where we have our home models. py, we have our homepage. html We've been doing all of our work in there. But now it's time to add a new package to our project. Now we do not want to add this to base. py because if we add this to base. py that means it's also going to be installed eventually in production. How this works is you have your base. py file and then your dev and production. py files will inherit everything from base. The idea is that anything that needs to be installed on both development and production goes into your base. py. Anything that is specific to development, such as Django debug toolbar. will

go into dev but dev. py and anything that's production based that does not run on your local host machine will go into production. py So we have this installed apps and it's just a list of installed apps. What we want to do now is we want to open up our dev. py and somewhere in here we want to put our installed apps is equal to installed apps plus and then a list. So all we're doing is we are putting two lists together and in here we want to type debug underscore toolbar. And that is it. Now at any point in time you can always open up your console, or your terminal rather, and you can see if things are in fact working or not working. So

here it says warnings uh debug toolbar middleware is missing from middleware. Okay, well that's probably just because we haven't gotten to that next step yet. So let's head back over to the install guide We have our debug toolbar installed. We don't need the static URL because Wagtail comes with that set up for us already. The next one we want is our URL conf. So even though it's complaining about our middleware, and I just know from doing this so many times that middleware is the next step after this, we're gonna ignore that for now. And we're going to open up our URLs. py and we're going to add some of this goodness in here. Now not necessarily all of it. We're using Django 2. 1. 5, so we don't need to use anything from earlier versions of Django. We just want Django 2 and up. So this is not necessary

So in your project there's this file called URLs. py and this is where all of your URLs live. And this is how we do routing in Django and also Wagtail apps. So in here what we're looking to do is import specifically just path because if we look here it wants include and url and settings But we already have include URL and settings imported, so all we need is path. So let's do this. From Django dot URLs import path And then at the very bottom, we're going to see this if settings. debug, this is saying if debug is equal to true, aka this is the Django way of saying, are you in development mode? Yes or no.

If you are in development mode, we need to add a little something extra. And this is all we need here. So I'm gonna copy this. Paste that in there. We don't need that twice. And uh for Django versions before 2. 0, let's get rid of that, because that's not applicable to us. Save and let's check out our terminal. Okay, it's still complaining about middleware, and that's okay. Because our next step is middleware. So installing your middleware is basically the exact same steps as installing your installed apps. So let's go ahead and copy this. Head on over to our dev. py because we are only installing this middleware for development.

Let's get rid of that. Let's get rid of that. And now if you remember. Dev. py inherits everything from base. py. So we need to find our middleware. We have a middleware variable here. And we want to append this to our middleware list. So all we do is type middleware is equal to middleware plus and then a list of more middleware. So if we ever wanted to add more, we can just add another line right below this. Likewise here, we could add another line below debug toolbar for an installed app that's only going to work on development instances. So let's save this and let's open up our terminal once more. And oh hello. So at this point you're probably thinking, oh this this should be working for me, but this is not going to work for you. And if I open up

Low coast 8000. I don't see anything different. This looks like like the regular site that we made over the last couple lessons. It's ugly, that's true, but there's no sign of debug toolbar. That little thing, that little notch that's on the right side of your page, there is nothing there So we need to go and make sure that that is there. Now why would that not show up? Well, if you ever run into this issue, remember you can always check docs. You can always go on to github. com, check out the repo, and see if there are any known issues Now if we scroll down to the bottom part of the installation page it says internal IPs. The debug toolbar is shown only if your IP is listed in the internal IPs settings You can change this logic with show toolbar

callback option, which we're not going to get into, but for development, you should add 127. 001 to your internal IPs. I've actually got a better way of doing that. We're going to use 127. 001. But also because there are a lot of people out there using Docker, we're going to add 172. 17. 0. 1. Now if you're listening to this and you're thinking I will never remember that, that's okay. Let's type this out. We want Internal IPs is equal to, and this one's going to be a tuple, so we want 127. 0. 0. 1. That's our local host. And for Other people, this is a common one, 127. 17.

0. 1. And we're just going to save that, open up our terminal, make sure everything has refreshed, things are looking good. Head on over to Firefox or whatever browser you like. Hit refresh. Oh there it is, there's our debug toolbar. So that is how you install debug toolbar using Wagtail 2. 4 and Django 2. 1. 5. This is very applicable in almost every version of Wagtail. This installation guide has not changed for me since Django went from version 1 to version 2. Hey there, did you like this video? Don't forget you can subscribe, you can share, you can give it a thumbs up, leave a comment below if you have any questions, uh, or

Or if you found something that was really, really helpful, feel free to share an anecdote or a story. Don't forget you can access the docs for this particular lesson at DjangodebugToolbar. readtheds. io You can always reference Wagtail's docs at Wagtail. io, and for more tutorials like this, you can head on over to learnwagtail. com