Getting Started with Debugging in VS Code (Official Beginner Guide)
Summary
TLDRThis 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
🛠️ 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.
🔍 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.
🌐 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.
Mindmap
Keywords
💡Debugging
💡VS Code
💡Breakpoints
💡Variables
💡Watch
💡Call Stack
💡Polymorphism
💡Extensions
💡Launch Configuration
💡React
💡Developer Tools
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
Посмотреть больше похожих видео
How to set up Visual Studio Code for Executing and Debugging C Programs | Tutorial
Set Up C++ Development With Visual Studio Code on Mac | VSCode C++ Development Basics MacOS (2024)
Debugging Node.js with ndb | Lecture 109 | Node.JS 🔥
The Most Important Skill You Never Learned
Debugging JavaScript - Are you doing it wrong?
Cara Install React Native + Full Setup [2024]
5.0 / 5 (0 votes)