Debugging a Django web application in VS Code

Published on May 12,2020 by Maulik

Web applications, when built in their entirety, are a complex piece of software passing the execution of the code from one file to another within the project. It involves a lot of configuration and parameters, and frequently after making a change in a project file, we tend to forget to make necessary changes elsewhere in the project. And it becomes a tiresome process sometimes to find out what is causing our application to halt and then solve it.

Fortunately, we have a tool at our disposal, which makes it easy for us to quickly find out where and at what point is the error occurring in the web application. It becomes an essential tool as the project becomes more significant and more complex. VS Code has got a potent and customizable debugger tool, which helps us debug our code efficiently and effectively. I am explaining how you can configure and make use of the Debugger by giving a step-by-step guide in an example Django project using VS Code. You can download the example project from <here> to follow along. Please note that debuggers are generally useful for a complex project, so I give you a head start with a straightforward example, but the steps are the same for large projects as well.

In this article, you are learning: 

• What is Debugger?
• How to configure Debugger in VS Code for Django project
• How to Debug code using our configured Debugger.

What is Debugger?

A debugger is a tool that allows us to control and monitor the execution of our code, like the state of our program—for example, knowing the value of the variables and few other things in the project. It offers functionality to stop at a particular point of the code where we think the error is occurring and observe the values of all the defined variables at that point of the code and proceed further in the code step-by-step. It enables us to carefully analyze our code line-by-line and see for ourselves with a “magnifying lens” where the code is deviating from the expected behavior.

How to configure Debugger for Django in VS Code?

• Download the example project from the given link and open the downloaded project folder using the VS Code. Open the Debugger in side-panel by clicking on the debugger icon, as shown below, or you can press ‘Ctrl + Shift + D’ to open the debug side panel.
• 

• In the left corner of the debugger panel, you can see a green button that starts the Debugger. Adjacent to it is the selected configured service to run when that green button is pressed. In my case, I have already selected Python Django. If you want to add configuration for Django, you can click on dropdown and press Add Configuration, and it opens the launch.json file in the editor. Write python there, and you get a list to configure python with different applications, as shown below.
• 

• Now you can change the default configuration if you want to execute different files by providing a full path of the file. You can also remove or add arguments you want to pass while running your project. E.g., As shown in below animation, I added an argument so that my application runs on port 8090 instead of default port 8000 
• 

How to Debug the Code using the configured Debugger?

After configuring the Debugger as per our project requirement, let’s start debugging the actual code and unleash the real power of our Debugger now.

• Our project tree looks something like this: 

 <Project Tree>

• I have configured my Django server to run on http://0.0.0.0:8090/, but you can configure it to whatever else you’d like. Now, go to the link http://0.0.0.0:8090/register. We start debugging the registration process of the Django project now.
• 

• If you see in the project, this register API request is handled in Sign_up/views.py in the register method. Let’s try to run the Debugger by selecting Run > Start Debugging or by clicking that green button in the debugger panel on the top left or by simply pressing F5. If a debugger is running successfully, you can see the status bar change from blue to orange, as shown below.
• 

• You can see a debugging toolbar as below with 6 options, namely Pause, Step Over, Step Into, Step Out, Restart, and Stop.
• 

• Now, to monitor the execution process, we are setting breakpoints in the register method. Breakpoints are points where the code halts execution when it reaches that specific line. To add the breakpoint, you can hover the cursor over the line margin, and a faded red dot is displayed. Just click on the line, and the breakpoint is set.
• When we go to the register page, we send a “GET” request, and when we click on the “Sign Up” button after filling the form, we send a “POST” request. 
• We are adding a breakpoint inside the first “if” condition, which checks for the POST request. So code execution can only reach there if the “Sign up” button is clicked. Otherwise, it enters an “else” statement where we add our 2nd breakpoint. On receiving the “POST” request, it is executed. We are adding a breakpoint in between inside the 2nd “if” condition, which will be executed only if the form filled is valid. 
• 

• Now reload the register page, and we reach the 3rd breakpoint inside the else condition because we just sent a “GET” request to our API by reloading the page. The yellow line here shows that it is the next line to be executed.
• 

• The side panel for the variable looks something like this. It only contains a request variable 
• 

• In the Debugging toolbar, the press continues (F5), so the code again starts the execution until it meets a breakpoint or reaches return. In our case, it reaches the return.
• Now, let’s fill the form correctly as per the given instructions and click on the “Sign Up” button. We encounter the 1st breakpoint inside the “if” condition because the request we sent just now was a “POST” request.
• 

• As we have filled a valid form, it must also get to the third breakpoint, which is displaying the success message.
• 

• If everything was successful, you are redirected to the login page and can see the account created message, as shown below.
• 

• And our variable values at this state are as below. The form contains UserRegistrationForm object with the details of the user, and we have a request object with POST request.
• 

• You can also see the call_stack displaying which functions have called which functions until the currently executing function.
• 

• If you want to observe a specific variable, you can also add that variable to watch. The value can change that variable as the program is executed. Suppose at this state of the program, my watch window with the variable form looks like something like this.
• 

Summary

A debugger is an essential tool as the project becomes more difficult in structure and size. In the VS Code, we learned how to configure the Debugger as per our requirement and how to debug the code. Just for fun, you can try filling the form with invalid details and monitor how the program flow is executed using the Debugger as explained above. I hope this tutorial is of value to you. Thank you for reading this article till the end.