Introduction to Kolo by Wilhelm Klopp

Speaker 1: Hello JangoCon. My name is Will and I am the creator of Colo. I am so excited to share Colo with you, which is available in beta from today. What is Colo? Colo is a runtime debugging and inspection tool. For Django and VS Code. Colo shows you what your Django app is doing as it's running and as you interact with it locally. Because when it's really easy to see what's going on under the hood, it's much easier to fix problems, add new functionality, and most importantly, build a real strong mental model of your code base. Let me show you how it works.

Speaker 2: Alright, I want to get started by showing you what Colo can do in just a basic demo app. So I have a Django app here and it's just these 60 lines of code. All of the code is contained in this file. And as you can see, we're you know making some calls to the GitHub API, then we're creating some records in the database, and finally we're returning some JSON. So what I'm gonna do is is run this curl command at the bottom here, and then let's see what happens. So you can see that immediately Colo shows us that our Django app just served a request and now we can see everything that happened during the request. So of course we can dig into the request and the response and the details of that, but we can also look at all of the HTTP requests that were made during the request and see those details. So for example, we can see the API response from GitHub. um and and look at the whole content even though our app doesn't make use of it.

Speaker 2: We can also take a look at the SQL queries that were made during this request. Um and you might already be able to tell that it's kind of looking like the same query again and again. So that tells us that there's probably something we can optimize here. Now the other really cool thing that you can do is see all of the the functions that were executed during the request. That's under frames here. And you can actually already see this inline here in the editor So for example, we have ensure user has permissions, and clearly you can see this is a demo function and it always returns true. But in line we can see the function arguments that this function was called with during the request. and then what it was returned with. And and this is true for all of the functions in this file because they were all called during the request.

Speaker 2: But actually Even beyond seeing the arguments and the return values, you can dig one step deeper. So let's click on this inline annotation here, and actually Colo shows us all of the local variables that were defined during the request. And you can dig into those and see if anything doesn't match what you were expecting to see. So that's how Colo shows you what happened in your request, all within VS Code. We use Colo internally to build SimplePole. Simplepol is one of the most popular apps for Slack with millions of people using it every year. And let's imagine that I'm a new developer, I just joined the SimplePole team and I was just assigned my first task. And my task is that whenever someone votes on a poll to show a confirmation message to that user saying, you vote it. But this is my first time on the code base. I really don't know where anything is, so I don't know where to add my feature.

Speaker 2: But let's use colo to to figure that out. So I can click down here to open colo and now I can open the visualization that colo provides to give me an overview of everything that happened in that request where someone voted on a poll. So you can see there's a couple different things going on, but very clearly there's this central node in the middle that a lot of things seem to hang off of. And yes indeed, this is the vote function. This is where the logic lives. This is where it makes sense for me to add this feature. So even though I'm completely new to the code base, Colo just showed me the way and showed me the the the place where it makes sense for me to add this feature. So I've prepared this already here actually to help us uh move along. Um so uh let's uncomment this and then head back to Slack to to cast our our vote. And now this isn't actually going to work, but I want to show you how uh colour handles exceptions. So you can see error triangle here.

Speaker 2: Let's go back to VS Code. and um clear red background, you know, very clear that something went wrong here. So let's click on this. And you have the familiar stack trace on the right here, but very importantly Colo showed us right to the place where in our code, not in the library code, but in our code, this exception happened. Um and actually I 'll demo this again because I think it's so cool. So you can always come back to this and click Um and here we are. Here's exactly where in our code the specific exception happened and now we can dig in further and and figure it out. But I'm happy to say that the days of trying to parse, you know black and white console output and and reading all the the paths and and just to figure out where in your code this exception actually happened, those days are over. Just click the button and and you're right here.

Speaker 1: Now, what do you need to do to get all this awesomeness set up on your code base? Well, believe it or not, but all you need to do is add one line to your middleware. So head to colo. app to get started. And we'll also be hanging out in the Kolo Discord channel. So hit us up there. We're super excited to help you get set up or talk about anything Python or Django related. I hope you have a fantastic Django Con.