Getting Started with Debugging in VS Code (Official Beginner Guide)

Summary

This video tutorial showcases essential debugging techniques in Visual Studio Code (VS Code). It covers setting breakpoints, using the debug toolbar, and navigating through variables, watch, call stack, and loaded scripts. The tutorial also highlights debugging a C project with extensions and demonstrates polymorphism. Further, it explores debugging a React web app, manipulating variables, and using developer tools within VS Code, including the unique Edge developer tools integration.

Takeaways

• 🔧 Debugging is a crucial skill for developers, and VS Code provides robust tools to facilitate this process.
• 💻 For simple JavaScript and Node.js files, VS Code's debugging capabilities work out of the box.
• 🛑 Adding breakpoints in VS Code is straightforward; just click on the line number where you want the code execution to pause.
• 📚 The debug sidebar in VS Code includes sections for variables, watch, call stack, and loaded scripts, providing comprehensive debugging information.
• ⏯ The debug toolbar offers buttons for continuing, stepping over, stepping into, and stepping out of methods, as well as restarting and stopping the debugging process.
• 🧩 When working with unsupported languages like C, installing the appropriate extensions such as C/C++ and C++ Build Tools is necessary for debugging.
• 📝 The 'watch' section is particularly useful for tracking the values of specific expressions and variables throughout the debugging session.
• 🔄 Debugging a React web app in VS Code requires configuring the 'launch.json' file to point to the correct port and set other parameters like browser type and web root.
• 🎛️ During debugging, you can manipulate variables and use the console to output information, which is helpful for testing specific conditions.
• 🌐 The debug console allows access to the window object and DOM elements, enabling real-time manipulation of the web page within VS Code.
• 🔧 Edge browser users can access the Edge Developer Tools directly within VS Code for a more integrated debugging experience.

Q & A

What is one of the most important skills for developers according to the video?

Debugging is one of the most important skills for developers.

How does the debugging process start in Visual Studio Code (VS Code)?

The debugging process in VS Code can be started by clicking the 'Run and Debug' icon on the left-hand side or by pressing F5.

What is the purpose of setting a breakpoint in VS Code?

A breakpoint is used to pause the execution of the code at a specific line, allowing developers to inspect variables and the flow of the program.

What are the different sections visible in the left pane during debugging in VS Code?

During debugging in VS Code, the left pane shows sections for Variables, Watch, Call Stack, and Loaded Scripts.

What does the Variables section display in the debugging pane of VS Code?

The Variables section displays the variables in the current debugging scope, including their types and values.

How can you track specific expressions or variables during a debugging session in VS Code?

You can track specific expressions or variables by adding them to the Watch section in the debugging pane.

What is the difference between the 'Step Over' and 'Step Into' buttons in the debug toolbar of VS Code?

The 'Step Over' button allows you to execute the current method without stepping into its internal calls, while the 'Step Into' button lets you step into a method to debug its internal calls.

What is the use of the 'Loaded Scripts' section during debugging in VS Code?

The 'Loaded Scripts' section lists all the scripts that have been loaded in the current debugging session, which is useful for navigating different parts of the code or libraries being used.

Why might you need to install extensions to debug a C project in VS Code?

To debug a C project in VS Code, you might need to install extensions like the C/C++ extension pack, which includes the C/C++ compiler and debugger tools.

How can you set a conditional breakpoint in VS Code?

You can set a conditional breakpoint by right-clicking on the breakpoint and specifying a condition, such as when a variable equals a certain value.

What is the purpose of the 'Restart' button in the debug toolbar of VS Code?

The 'Restart' button is used to restart the debugging session from the beginning, which is useful when you want to start over without having to stop and relaunch the debugger.

How can you access the browser's developer tools within VS Code when using Edge?

You can access the Edge developer tools within VS Code by installing the Microsoft Edge Tools for VS Code extension and then clicking on the 'Edge Developer Tools' option in the debug toolbar.

What is the significance of the 'Launch.json' file in debugging a web app in VS Code?

The 'Launch.json' file is significant because it configures the debugging environment, including the port number, browser type, and other parameters necessary for the debugger to attach to the web app.

Outlines

00:00

🛠️ Debugging in VS Code

The paragraph introduces debugging in Visual Studio Code (VS Code) as a crucial skill for developers. It explains how to set breakpoints in JavaScript and Node.js projects directly within the editor. The process of starting a debug session is outlined, including navigating through the interface and toolbar options such as 'Continue', 'Step Over', 'Step Into', 'Step Out', 'Restart', and 'Stop'. The sidebar sections like 'Variables', 'Watch', 'Call Stack', and 'Loaded Scripts' are highlighted for their utility in debugging. The paragraph also touches on debugging a C project by installing necessary extensions and setting up the environment.

05:01

🔍 Advanced Debugging Techniques

This section delves into more advanced debugging techniques, such as manipulating variables and setting conditions for breakpoints. It discusses how to use the 'Watch' section to monitor variable values and how to modify these values during a debugging session. The concept of stepping into and out of methods is demonstrated, along with the use of the call stack to understand the flow of execution. The paragraph also shows how to set breakpoints based on conditions, such as a specific employee record, and how to interact with the console and the window object to debug a React web application.

10:02

🌐 Debugging Web Apps with Edge

The final paragraph focuses on debugging a web application using Microsoft Edge within VS Code. It emphasizes the importance of configuring the 'launch.json' file correctly to target the right port and other necessary parameters. The ability to manipulate variables and elements directly from the debug console is highlighted, showcasing the power of live editing during a debug session. Additionally, the paragraph introduces the integration of Edge Developer Tools within VS Code, allowing for direct manipulation of the DOM and other browser functionalities. The video concludes with a call to action for further content and a prompt for viewer engagement.

Keywords

💡Debugging

Debugging is the process of identifying and correcting errors or bugs in computer programs. In the context of the video, debugging is a crucial skill for developers using Visual Studio Code (VS Code). The script describes how to debug JavaScript and Node.js files, set breakpoints, and use the debug toolbar to step through code to find and fix issues. Debugging is central to the video's theme of improving developer efficiency and code quality.

💡VS Code

Visual Studio Code (VS Code) is a popular, open-source code editor developed by Microsoft. It is mentioned extensively in the script as the primary tool for demonstrating debugging techniques. VS Code supports debugging for many languages and platforms, and the video showcases its debugging capabilities, emphasizing its importance in a developer's workflow.

💡Breakpoints

A breakpoint is a marker in the code that tells the debugger to pause execution at a specific line. The script explains how to set breakpoints in VS Code by clicking on the line number, which is vital for pausing the program at a desired point to inspect variables and execution flow. Breakpoints are a fundamental part of the debugging process demonstrated in the video.

💡Variables

Variables in programming are used to store data values. The script mentions the 'Variables' section in the debug panel of VS Code, which displays the current scope's variables, including their types and values. Understanding and inspecting variables is crucial for debugging, as it helps developers track data changes and identify unexpected values.

💡Watch

In the context of debugging in VS Code, 'Watch' refers to a feature that allows developers to monitor the values of specific expressions or variables throughout a debugging session. The script illustrates how to use the 'Watch' feature to track variables like 'salary' and 'person', which is essential for observing how data changes as the program executes.

💡Call Stack

The call stack is a data structure that keeps track of active subroutines or functions during execution. In the script, the 'Call Stack' section in the debug panel is highlighted, showing the hierarchy of function calls and the path the program took to reach the current point. This is crucial for understanding the flow of execution and for navigating through nested function calls.

💡Polymorphism

Polymorphism is an object-oriented programming concept where objects of different classes exhibit the same interface. The script uses a C project to demonstrate polymorphism by determining a worker's salary based on whether they are an employee or a contractor. This concept is used to show how debugging can be applied to understand complex behaviors like polymorphism.

💡Extensions

Extensions in VS Code are add-ons that provide additional functionality or support for different programming languages and tools. The script discusses installing the C/C++ extension and the net install tool to debug a C project, emphasizing the importance of extensions for enhancing the debugging capabilities of VS Code beyond its default configuration.

💡Launch Configuration

Launch configuration in VS Code is a set of settings that define how the debugger should start the application being debugged. The script mentions configuring 'launch.json' for a React web app, specifying parameters like port, request type, and URL. This configuration is essential for setting up the correct environment for debugging web applications.

💡React

React is a popular JavaScript library for building user interfaces, particularly for single-page applications. The script includes a demonstration of debugging a React web app, focusing on a CRUD (Create, Read, Update, Delete) application for employee management. React's component-based architecture is used to illustrate how to debug and manipulate UI states and interactions.

💡Developer Tools

Developer Tools are a set of utilities integrated into web browsers and development environments like VS Code to help developers test, debug, and profile their web applications. The script shows how to access Edge Developer Tools within VS Code, allowing for in-browser debugging and manipulation of DOM elements directly from the editor. This integration enhances the debugging experience by combining the power of browser tools with the convenience of VS Code.

Highlights

Debugging is one of the most important skills for developers.

VS Code supports debugging for JavaScript and Node.js out of the box.

Adding a breakpoint in VS Code is as simple as clicking on the line number.

The Run and Debug icon starts the debugging process.

Debugging tools in VS Code include variables, watch, call stack, and loaded scripts.

The Debug Toolbar offers options to continue, step over, step into, step out, restart, and stop debugging.

For unsupported languages, install the necessary extensions from the Marketplace.

The C Dev Kit and C extensions are needed for C language debugging.

Demonstrates polymorphism in a C project using VS Code's debugging tools.

Variables and watch expressions can be monitored during a debugging session.

The call stack shows the hierarchy of function calls during execution.

Loaded scripts list all scripts loaded in the current debugging session.

The debug console allows for quick value checks and manipulation.

React web apps can be debugged to manipulate variables and view changes in real-time.

Breakpoints can be set with conditions to hit only under specific circumstances.

The terminal in VS Code can be used to write to the console and check values.

The debug console provides access to the window object and other DOM elements.

Edge Developer Tools can be accessed within VS Code for debugging web apps.

The developer tools allow for real-time manipulation of page elements.

VS Code's debugging documentation offers more in-depth information and guides.

Encourages viewers to request more videos on debugging topics and engage with the content.

Transcripts

hey everyone if you'd like to keep up

Tod dat with a developer best practices

and tips in Tech check out GitHub

Insider newsletter via the link in the

video description below as a developer

debugging is one of the most important

skills to have and in vs code there's so

much that you can do so let's go ahead

and take a look so the great thing when

debugging with vs code is that for

simple files using JavaScript and node

it works right out the box in this

simple program here that prints out a

greeting to add a break point I can just

go to the line number that I want let's

say it was six and click on the left

hand side here which will show a red dot

and to begin the process of debugging on

the left hand side you'll see there's an

icon for run and debug and then I can

just come over here to click run and

debug to start the process now if it's

your first time you may get a drop down

like this at which point you'll just

choose node.js now since I've already

done that I can just go to run and debug

and it will start the process and it

stops at line

six and now on the left pane you'll

notice several sections one for

variables which displays the variables

in the current debugging scope including

their types and values we have watch

that allows you to track the values of

specific expressions and variables

you're interested in throughout the

whole debugging session call stack shows

the hierarchy of function calls at the

current moment in the execution

indicating the path the program took to

reach the current point and loaded

scripts lists all the scripts that have

been loaded in your current debugging

session which is useful when you're

navigating different parts of your code

or libraries being used and at the top

of the screen you'll notice that there's

a debug toolbar with a few different

buttons the first being to continue so

after you've stopped at a break point

you just want to continue to the next

breakpoint or the end of the program you

hit this button if you come to a method

and you don't want to jump in that

method but step over it that's what this

button here is for on the flip side if

you do want to step into the method you

hit the down arrow and then to step out

of the method the up Arrow if you want

to restart the debugging process you

click restart and to stop it this red

square here so really those are some of

the basics right there but why don't I

show you this toolbar in action in

another project with more code in this

project here it's going to demonstrate

polymorphism and it is a c project now

whenever you're going to to bug a

project that's not supported by default

in vs code you'll want to go to the

extensions Marketplace and install the

appropriate extensions that you need so

in my case I needed to install the C dev

kit which helps you manage your C code

in addition to the C extension and last

but not least the net install tool so

you can set up the net runtime if you'd

like some detailed instructions on

setting that up you can watch the first

two modules in this video here now this

project here demonstrates polymorphism

by taking a particular worker and

determining what their salary is based

on whether or not they are an employee

or a contractor let's go ahead and

choose run and debug as you can see on

line 48 I already have a break point

there where it will stop I'll jump at

the very top here and click the play

button to start the debugging process

and soon we'll see our debug toolbar at

the very top let's experiment with some

of these buttons stepping over if I

wanted to step over this method it will

do so but let's go ahead and step into

it so we could see a few other things so

now I'm stepping into the determin

weekly salary and it is for a Contractor

on the left pane you could see variables

that are local such as wage and we L

hours if there were some other variables

that I wanted to add to keep an eye on I

can just click the plus sign under watch

and put that there so let's say I put in

person it does not exist in the current

context which makes sense because we're

not seeing it in this method right now

but if I put in salary it's currently

zero but as I step through now it has a

value of 3850 so the watch section is

very useful for variables that you want

to keep track of when it's not defaulted

at the very top under locals right below

here is the call stack so we are within

determine weekly salary so that's the

last method that we called so that's

going to be listed first here but the

level above it is our main program which

we see right below it so when we get out

of this method we should only see one

line which is for the main program so if

we want to step out let's go ahead and

click the step out button now once we

step out you'll notice that it's written

that the contra contractor work 55 hours

with a total of 3850 that's appropriate

for a contractor that has overtime

you'll notice that on the watch now we

have a value for a person because it is

within context we can see it's a

contractor we also see that our call

stack is now down by one line because we

are in our main method and at the bottom

there is just a nice view of all our

break points if I wanted to start this

debug session over I could just click on

restart right here and by default it

shifts to this terminal view but I could

click on debug console again and now

online 48 rather than stepping into it I

could just step over it prints out our

results one more time and at this point

I can either continue to the end of the

program or just stop the debugging

process by clicking this red square here

which is what I'll do I should also

mention that from this debug console you

can check values here here quickly also

so if I typed in wage it shows me 70 if

I typed in person it indicates the

object type which is a

contractor I'd like to turn our

attention now to another app this time

it's a react web app that I'm going to

go ahead and launch and we'll do a

little debugging on this app which is a

crud application for an employee

management software so you can create an

employee obviously we could read the

record update them and delete them now

I'd like to note that when I executed

this it indicated that I'm using Port

3,000 which is important to note because

when we go to debug you want to make

sure that you set up your configuration

and launch. Chason to point to Port 3000

in the URL in addition to these other

parameters such as type request name and

web rout and if you have access to chat

you could simply ask it to Define what

each of them do which is fairly

straightforward but I do appreciate the

reinsurance and as it mentioned type is

for the type of browser for request we

want to indicate launch because that's

what we're doing launching the browser

name pretty much anything can go in

there it's whatever is going to be

useful for you and for the URL this is

where we're going to indicate our

specific port and then of course web

root which tells the debugger where the

root of the web server is relative to

your project now for my demonstration

I'm going to be showing how to

manipulate some variables which will be

reflected from the the edit page so I'll

add a breakpoint right here and I will

start the debugging and similar to what

I've shown before we're able to set

break points to manipulate data but in

this case I'm going to go ahead and

choose edit like I mentioned and say

that we want to change George blue to

let's say George strong and we click

update as you can see under our watch

variables it indicates strong but right

from here I can right click and either

add an expression set value or copy the

value let's change this and instead of

strong we'll just say stronger and when

we go to continue the process we don't

have strong but we have stronger just as

expected and it's a quite powerful thing

to be able to manipulate the variables

during the debugging process especially

if there's specific conditions that you

want to meet so let's say I wanted to

test a particular condition but only for

the record of Adrien orange I I can come

here and edit this break point and

indicate that I only want to hit this

break point when the first name is equal

to Adrien now if we hover over the

breakpoint we see that it says that

there's a condition with our expression

so if I come back up here and change

let's say Ral there's an interesting

name let's change that to let's change

that to rynal and click update it

updates without any breako being hit but

if I come over here to adri Adan and

then want to change this name here to

Smith now the breakpoint gets hit just

as we expected and I'm not going to make

any changes I'm just going to continue

and the update is made another thing I'd

like to show in this uh web app is in

respect to the terminal if you are a fan

of writing out to the console if you

notice here on line 15 there's a

console. info command that's executed

and in fact I can add something

additional we are in edit mode and now

when I run the process to edit and I go

to edit a name even if I don't make any

changes right over here is where it will

write out some content that I want

specifically about the object of the

selected employee and that we are in

edit mode another thing to note about

this section here is I can have access

to the window object if I want

and pretty much any other element if I

wanted to go to see the values in the

body I could do that let's continue out

of this here just so we could get to the

grid because I now want to demonstrate

how I can modify the background if I

wanted let's say to Green which looks

horrible so let's go ahead and switch it

back but it's nice to know that you have

a little flexibility to toy around with

it that looks slightly better but really

we could just put it back to white but

there's even a cool way to manipulate

the page especially if you're using Edge

so let's go ahead and do that now if you

like to use Edge to debug you'll want to

make sure that your launch. Json is

configured properly to use Edge pointing

to the correct Port once that's set you

can choose run and debug and after you

actually click the play button it should

launch but the main reason I wanted to

demonstrate this is because of this

extra option here which was not in

Chrome and this will give you the option

to access the edge developer tools

within vs code so when we click it what

you'll need to do is install Microsoft

Edge tools for vs code once that's done

and you click it again now you have

access to the same tools that you would

in the edge browser so now let's go

ahead and Shrink our window and make

some space so we could see what we have

access to and also from here we could

actually modify some elements such as in

this body here I can go ahead and choose

whatever color I want that text to be

whether it's red or green a darker green

and it makes it a much nicer experience

let's change it back to black over here

for the background I can quickly modify

whichever way that I want and again I'm

fine with leaving it at a nice white

background and so you can play around

with this and see other other elements

you might want to modify using the

developer tools as you would in the

browser but now you have the convenience

of doing it within vs code which is

excellent hope you enjoyed that I want

to give a quick shout out to softar

Jamal for his react app that I

referenced from GitHub and you could

find some more of his work in this link

over here now we covered a lot but

there's even more in the vs code docs on

debugging at this link over here if you

want me to make another video on other

debugging topics like configuring

launch. Json or anything else in the

docs let's have at least 50 people

mention in the comments part two and

we'll make that happen if you got value

out of this video definitely hit the

like button and subscribe to help our

Channel grow and I will see you in the

next one