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:

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.

136 Comments

DouglasMaH

3 hours, 16 minutes

where to buy liquid cialis <a href=" https://cialistlf.com/# ">generic tadalafil 20mg india</a> cialis pharmacy

DouglasMaH

19 hours, 6 minutes

tadalafil 10mg price <a href=" https://cialistlf.com/# ">cialis from india</a> generic tadalafil 20mg india

DouglasMaH

2 days, 2 hours

stromectol for humans for sale <a href=" https://stromectolive.com/# ">prescribing stromectol</a> stromectol 12 mg tablets

DouglasMaH

2 days, 3 hours

stromectol pills for humans <a href=" https://stromectolive.com/# ">stromectol pills for humans</a> stromectol price usa

Stromclall

3 days, 17 hours

best ed medication <a href=" https://edpilldrs.com/# ">herbal ed treatment</a> compare ed drugs

Stromclall

3 days, 17 hours

cheap generic drugs from india <a href=" https://indiadrs.online/# ">best online international pharmacies india</a> cheap generic drugs from india

Stromclall

4 days, 9 hours

stromectol pills for humans <a href=" https://stromectoldrs.com/# ">stromectol for sale</a> buy stromectol online

GregoryBUP

5 days, 20 hours

ivermectin horse paste for scabies <a href=" https://stromectolca.com/# ">stromectol dosing</a> ivermectin for heartworms

GregoryBUP

6 days, 11 hours

rabbit ear mites ivermectin <a href=" https://stromectolca.com/# ">what is ivermectin used for in dogs</a> ivermectin purchase

GregoryBUP

1 week

buy propecia uk <a href=" https://finasteridemen.com/# ">propecia</a> prosteride

GregoryBUP

1 week

canadian online drugstore <a href=" https://canadapillsshop.com/# ">best ed pills non prescription</a> online canadian pharmacy

GregoryBUP

1 week, 1 day

pills for ed <a href=" https://edpillcanada.com/# ">what are ed drugs</a> non prescription ed pills

GregoryBUP

1 week, 2 days

buy prescription drugs <a href=" https://canadapillsshop.com/# ">prescription drugs online without doctor</a> ed meds online without doctor prescription

GregoryBUP

1 week, 2 days

top ed drugs <a href=" https://edpillcanada.com/# ">medication for ed dysfunction</a> ed pills cheap

GregoryBUP

1 week, 3 days

buy propecia finasteride <a href=" https://finasteridemen.com/# ">propecia drug</a> propesia

GregoryBUP

1 week, 3 days

can you get propecia without a prescription <a href=" https://finasteridemen.com/# ">can you get propecia without a prescription</a> finasteride hair

JamesoMigh

1 week, 5 days

ivermectin scabies treatment <a href=" https://stromectolmrt.com/# ">ivermectin for demodex mites in humans</a> ivermectin 4

JamesoMigh

1 week, 5 days

buycialis <a href=" https://cialismrt.com/# ">best price for daily cialis</a> pay cialis with paypal

JamesoMigh

1 week, 6 days

how to get prednisone tablets <a href=" https://prednisonemrt.com/# ">buy prednisone</a> prednisone tablets canada

JamesoMigh

1 week, 6 days

buy prednisone without prescription <a href=" https://prednisonemrt.com/# ">prednisone for sale</a> buy prednisone 20mg without a prescription best price

JamesoMigh

1 week, 6 days

cialis with dapoxetine australia overnight delivery <a href=" https://cialismrt.com/# ">cialis usa online</a> cialis, generic

JamesoMigh

2 weeks

cialis otc switch <a href=" https://cialismrt.com/# ">cialis 20 mg best price</a> cialis black 800

JamesoMigh

2 weeks

ed drug prices <a href=" https://cheapdrugsmrt.com/# ">viagra without doctor prescription amazon</a> drug pharmacy

lrcfbbrexb

2 weeks

Django Circle | Debugging a Django web application in VS Code lrcfbbrexb http://www.gj9706gk46e4sp77369gwyqhs3q9o1q5s.org/ [url=http://www.gj9706gk46e4sp77369gwyqhs3q9o1q5s.org/]ulrcfbbrexb[/url] <a href="http://www.gj9706gk46e4sp77369gwyqhs3q9o1q5s.org/">alrcfbbrexb</a>

JamesoMigh

2 weeks

generic ivermectin cream <a href=" https://stromectolmrt.com/# ">trial site news ivermectin</a> ivermectin 3mg pill

JamesoMigh

2 weeks

viagra without doctor prescription amazon <a href=" https://cheapdrugsmrt.com/# ">muse for ed</a> natural cures for ed

JamesoMigh

2 weeks, 1 day

ivermectin cream <a href=" https://stromectolmrt.com/# ">what parasites does ivermectin kill</a> ivermectin lung cancer

JamesoMigh

2 weeks, 2 days

5 mg prednisone daily <a href=" https://prednisonemrt.com/# ">generic prednisone</a> generic prednisone otc

JamesoMigh

2 weeks, 2 days

purchase prednisone 10mg <a href=" https://prednisonemrt.com/# ">prednisone for sale</a> prednisone 10mg prices

Charleswar

2 weeks, 4 days

<a href=" https://stromectol.company/# ">ivermectin fda</a> stromectol liquid

Charleswar

2 weeks, 4 days

<a href=" https://stromectol.company/# ">ivermectin dog</a> ivermectin guinea pig

Stacyliz

2 weeks, 5 days

errectile dysfunction <a href=" http://cheapdrugs.icu/# ">best drugs for ed</a> do i have ed

Stacyliz

2 weeks, 5 days

pain meds without written prescription <a href=" http://cheapdrugs.store/# ">herbal ed treatment</a> cheap erectile dysfunction pills

ovexyfef

2 weeks, 5 days

female viagra cvs <a href="https://viagrahom.com/">generic viagra india</a> buy viagra online cheap

Stacyliz

2 weeks, 6 days

prednisone without a prescription <a href=" https://deltasone.shop/# ">medicine prednisone 10mg</a> 15 mg prednisone daily

Stacyliz

2 weeks, 6 days

cialis discount pharmacy <a href=" http://tadalafil.icu/# ">cheap canadian cialis</a> cialis free trial no prescription

Stacyliz

3 weeks, 1 day

medicine prednisone 5mg <a href=" http://deltasone.store/# ">prednisone 10mg price in india</a> prednisone 54899

Stacyliz

3 weeks, 1 day

ivermectin for mice <a href=" https://stromectol.company/# ">ivermectin tablets for humans over the counter</a> edenbridge pharmaceuticals ivermectin

zxvzdxcw

3 weeks, 2 days

Django Circle | Debugging a Django web application in VS Code zxvzdxcw http://www.gr4t6c0j5d17mg9v1oz5fk9524f66i8us.org/ [url=http://www.gr4t6c0j5d17mg9v1oz5fk9524f66i8us.org/]uzxvzdxcw[/url] <a href="http://www.gr4t6c0j5d17mg9v1oz5fk9524f66i8us.org/">azxvzdxcw</a>

Stacyliz

3 weeks, 2 days

prednisone 5 mg cheapest <a href=" http://deltasone.store/# ">prednisone 60 mg tablet</a> can you buy prednisone over the counter in canada

Stacyliz

3 weeks, 2 days

buy prescription drugs <a href=" http://cheapdrugs.store/# ">erectile dysfunction pills</a> treatment for erectile dysfunction

HaroldArbib

3 weeks, 4 days

drug pharmacy <a href=" https://drugsus.shop/# ">causes of ed</a> canadian drug pharmacy

HaroldArbib

3 weeks, 4 days

non prescription erection pills <a href=" http://drugsfast.store/# ">best ed medication</a> real viagra without a doctor prescription

HaroldArbib

3 weeks, 6 days

new erectile dysfunction treatment <a href=" http://drugsfast.store/# ">natural remedies for ed</a> best ed treatment pills

HaroldArbib

3 weeks, 6 days

prescription without a doctor's prescription <a href=" http://drugsfast.store/# ">which ed drug is best</a> erectile dysfunction drugs

crkrptysfk

4 weeks

Django Circle | Debugging a Django web application in VS Code crkrptysfk http://www.gji096ci1j727r1h1i7bvk672dy7oa57s.org/ [url=http://www.gji096ci1j727r1h1i7bvk672dy7oa57s.org/]ucrkrptysfk[/url] <a href="http://www.gji096ci1j727r1h1i7bvk672dy7oa57s.org/">acrkrptysfk</a>

HaroldArbib

4 weeks

ed pills that work <a href=" http://drugsfast.store/# ">best ed solution</a> online ed pills

HaroldArbib

4 weeks

ed drug comparison <a href=" http://drugsfast.store/# ">foods for ed</a> erection pills

HaroldArbib

4 weeks, 1 day

best ed medication <a href=" https://drugsus.shop/# ">dog antibiotics without vet prescription</a> erectial disfunction

HaroldArbib

4 weeks, 1 day

natural cure for ed <a href=" https://drugsus.shop/# ">legal to buy prescription drugs without prescription</a> viagra without doctor prescription

FrankNurse

1 month

buy clomid no rx <a href=" https://clomidmst.com/# ">clomid capsules</a> clomid tablets online

FrankNurse

1 month

cost of clomid uk <a href=" https://clomidmst.com/# ">can i buy clomid over the counter</a> clomid pills otc

FrankNurse

1 month

clomid online india <a href=" https://clomidmst.com/# ">clomid online sale</a> clomid steroid

FrankNurse

1 month

doxycycline 100mg buy online <a href=" https://doxycyclinemst.com/# ">how can i get doxycycline</a> doxycycline for sale online

FrankNurse

1 month

order amoxicillin online uk <a href=" https://amoxilmst.com/# ">generic amoxil 500 mg</a> amoxicillin without a doctors prescription

FrankNurse

1 month

how much is clomid 50mg <a href=" https://clomiden.fun/# ">clomiphene for sale</a> average cost of clomid

FrankNurse

1 month

generic prednisone tablets <a href=" https://prednisoneus.shop/# ">prednisone ordering online</a> prednisone brand name in usa

FrankNurse

1 month

amoxicillin 50 mg tablets <a href=" https://amoxilus.fun/# ">amoxicillin 875 125 mg tab</a> buy amoxicillin online mexico

FrankNurse

1 month

clomid 200 mg daily <a href=" https://clomiden.fun/# ">can you buy clomid over the counter in uk</a> clomid online sale

FrankNurse

1 month, 1 week

doxycycline 100 mg price uk <a href=" https://doxycyclineen.shop/# ">buy generic doxycycline 40mg</a> doxycycline usa pharmacy

FrankNurse

1 month, 1 week

order clomid online australia <a href=" http://clomidfast.site/# ">clomid 25mg for sale</a> clomid price in usa

FrankNurse

1 month, 1 week

generic prednisone pills <a href=" https://prednisoneus.shop/# ">prednisone 60 mg tablet</a> price of prednisone tablets

FrankNurse

1 month, 1 week

order doxycycline online canada <a href=" https://doxycyclineen.shop/# ">buy doxycycline tablets</a> can you buy doxycycline over the counter in nz

EdwardAbimb

1 month, 1 week

cialis ordering australia <a href=" http://cialiscnd.com/# ">free shipping for cialis</a> paypal cialis tadalafil

EdwardAbimb

1 month, 1 week

cialis price canada <a href=" http://cialiscnd.com/# ">brand cialis sale</a> п»їgeneric cialis

EdwardAbimb

1 month, 1 week

cialis prices in ontario <a href=" http://cialiscnd.com/# ">cialis coupon cvs</a> cialis free trial no prescription

EdwardAbimb

1 month, 1 week

soft cialis canadian pharmacy <a href=" http://cialiscnd.com/# ">cialis greece</a> cialis and dapoxetine canada

Strojoism

1 month, 2 weeks

ivermectin 200 <a href=" https://stromectolns.com/# ">liquid ivermectin for cats</a> stromectol otc

Strojoism

1 month, 2 weeks

ivermectin manufacturer <a href=" https://stromectolns.com/# ">oral ivermectin for dogs</a> ivermectin 15 mg

Artrcriff

1 month, 2 weeks

cialis canada <a href=" https://cls20.com/# ">cialis and no prescription</a> cialis efectos secundarios

Artrcriff

1 month, 2 weeks

generic vs brand name for cialis <a href=" https://cls20.com/# ">cialis 10 mg where to buy</a> cheap cialis from australia

Travismindy

1 month, 3 weeks

which presidential candidate was the first spokesman for viagra <a href=" https://edviagralove.com/# ">what does a viagra pill look like</a> how long does 25mg viagra last

Travismindy

1 month, 3 weeks

2 months

2 months, 2 weeks

Бетмен 1989 дивитися онлайн <a href="http://bitly.com/betmen-2022-film">Дивитися Бетмен</a> Бетмен 1989 дивитися онлайн

eljmgltrp

2 months, 2 weeks

Django Circle | Debugging a Django web application in VS Code <a href="http://www.g8t8x54p9141k2oeb3p92tz416ufy5hps.org/">aeljmgltrp</a> eljmgltrp http://www.g8t8x54p9141k2oeb3p92tz416ufy5hps.org/ [url=http://www.g8t8x54p9141k2oeb3p92tz416ufy5hps.org/]ueljmgltrp[/url]

AbertNew

2 months, 2 weeks

коли почалась друга світова війна <a href="http://bitly.com/skilky-shche-bude-tryvaty-viyna-v-ukrayini">скільки триватиме війна в україні</a> в той день коли закінчиться війна

loveawake.ru

2 months, 3 weeks

Welcome to the world of adult Dating loveawake.ru

jyqwmmrthw

7 months, 3 weeks

Django Circle | Debugging a Django web application in VS Code jyqwmmrthw http://www.g2q0l8p28n6u7ke1kz1065y1h4yqk6i5s.org/ [url=http://www.g2q0l8p28n6u7ke1kz1065y1h4yqk6i5s.org/]ujyqwmmrthw[/url] <a href="http://www.g2q0l8p28n6u7ke1kz1065y1h4yqk6i5s.org/">ajyqwmmrthw</a>