How to get started with the Debugger in VS Code

The fastest way to squash those bugs

Alice Ridgway

Published in

Dev Genius

4 min readOct 12, 2020

I have a confession to make. Until yesterday, I was using print statements to debug my Python code.

Print statements will help you get the job done, but they are cumbersome to use. You need a separate statement for every path your code’s logic could take you and you have to remember to remove them when you’re finished.

Print statements also return information as a string, so what you see is what you get. If you’re debugging something complex, you might want to be able to explore whole objects.

There is an easier way.

Using the debugger will provide you with a lot more information without modifying your code. It is also very quick to set up.

I’m going to be using my current Django (Python) project as an example but the steps can be easily adapted to whatever programming language you are using.

Let’s get started…

Fire up your project in VS Code

First, let's find the debugging tab; it’s the fourth one down on the left.

Next, click to create a launch.json file. This will store the configuration for your project.

When you click to create a launch.json file, VS Code will present you with some options. Pick the ones most suitable for your project. I selected Python and then Django.

This will automatically create your launch.json with the correct configuration for your project. For future reference, it’s stored in a folder called ‘.vscode’ at the root of your project.

That’s the debugger set up, now to use it…

What we’ll do is set a breakpoint in our code, somewhere where we’ll otherwise put a print statement.

When we run the debugger, it will run our development server as normal. When the development server reaches a breakpoint, VS Code will automatically bring up the debugging panel and we can inspect our variables.

First, we need to set a breakpoint. Find the line you want to break on and click on the empty space just left of the line number.

Before we start the debugger, we must stop the development server first. When we press Play, the debugger will run the development server using the command specified in the launch.json.

A successful start of the debugger will bring up the command palette at the top right of your screen.

Now, we’re going to run our code. My project is a Django web application, so I’m going to run my code from the browser.

I placed my breakpoint inside a block of code that runs when I request the page to update a member.

With the debugger running, I clicked on Marty’s profile. Instead of loading the page where he can update this profile, I’m brought back to VS Code as it has hit the breakpoint.

I placed the breakpoint on line 92. The IF statement hasn’t been run yet, but I can inspect the variable ‘member’ which was defined in line 90.

Member is an object that has been fetched from the database. The object will store the member’s name, a URL for their profile photo, reference to the user who created it, plus a whole lot more.

It would take a lot of print statements to show this much information.

Instead, I can expand the member variable in the debugging panel to get more information.