Nobody's code works the first time all the time.
Learning to use a debugger to find problems in your code is part
of a developer's job, and being able to debug your code
right in the editor you're using to write it is very convenient.
VS Code includes a built-in debugger with debugging
support for Node.js.
With it, you can debug JavaScript, TypeScript, and any language that
transpiles to JavaScript.
You can also install debugger extensions for lots of
other languages.
Let me show you a couple of ways you can get started with
the built-in debugger.
I'll first open the menus.js file from the scripts folder
in my project.
You can add breakpoints to a code file by clicking in the far
left margin on the line where you want the code to pause.
I'll add one on Line 8 of this file.
Since the index.htm file is the home page for the site,
I'll open it so we can run and debug from there.
I'll now click the "Run and Debug" button on the activity bar.
From here, I'll click the "Run and Debug" button at the
top of the panel.
The debugger starts up, I'm taken back to the
menus.js file,
and the code pauses on Line 8 where I set the breakpoint.
Also, the site was opened in a new browser window.
I'll quickly switch to that window.
You can see the page hasn't finished loading because it's
dependent on execution of the JavaScript file that's currently
paused in the debugger.
If you've used debuggers built into other editors and IDEs,
then using the one in VS Code should feel very natural.
It has all the basic features you would expect. At the top of
the run and debug panel, there's a section where you can
browse local and global variables.
The code is currently paused on Line 8,
but you can see that a new variable named menu was
declared on Line 6.
It appears in this section as a local variable in the
enableMenus.
function.
I can click the little arrow beside it to expand it and view
its properties and more information about it.
Below this section is a section where you can define
watch expressions.
There's nothing in it yet, but I'll click the "Plus" button and
I'm prompted to add a new expression.
I'll add document.title to see the title of the current page.
Below this are sections for the call stack,
loaded scripts, and breakpoints.
You can see I already have a breakpoint set in the
menus.js file, but I'll also go ahead and check
the boxes to break on caught and uncaught exceptions.
Just above the editor panel is a debug toolbar you can use to
step through your code.
It has all the standard buttons for stepping a line at a time or
into and out of functions.
Notice as I click the step button, the yellow highlight in the code
file moves to the next line of code.
I can stop debugging by clicking the red square at the end of
the debugging toolbar.
That's a quick way to get started debugging your client-side
JavaScript code.
I also want to show you how to do the same thing with your Node.js
server-side code.
I don't currently have any server side code in this project,
but I'll quickly add just enough to show you how to get
started debugging it.
I'll first go back to the project explorer and add a new
file named server.js.
I'll paste into the file some sample code I got from the
official Node.js website.
The node site refers to this as the hello world of Node.js
applications.
It declares a few variables and then creates a new HTTP server and
listens for new incoming HTTP request.
It's a very basic web server.
I'll add a new breakpoint on Line 4.
I'm going to start the debugger for this application a little
differently from the last one.
This code includes a special terminal known as the JavaScript
Debug Terminal that you can use to start command
line node apps in the debugger.
To get to it, I'll first open my default terminal.
From the new terminal dropdown on the right,
you can see some of the terminal choices we looked at earlier
in the course.
One in this list that I didn't mention before is the JavaScript
Debug Terminal.
I'll click on it to open a new one.
It looks like any other terminal.
However, if I use it to start a node application I have
open in VS Code,
it will automatically attach it to the built-in debugger.
I'll start my new web server application with the command
node server.js.
I get a message in the terminal that the debugger is attached,
and you can see in the editor above that it's already paused at
the breakpoint I set on Line 4.
At this point, I have access to all the same debugging tools
I showed you earlier.
In the watch section,
you can see it retain my document.title expression,
but doesn't know how to evaluate that for this app.
I'll quickly delete it and add another watch on the hostname
variable created on Line 3.
I can also step through code just like you saw me do earlier.
When I'm done, I can press the "Disconnect" button at the end
of the debug toolbar.
These debugging options work great for JavaScript and TypeScript
projects,
but if you're working in a different language,
you'll probably need to install a VS Code extension that includes
a debugger for that language.
I covered installing extensions earlier in the course,
but one way to quickly browse debugger extensions is to
click on the "Run" menu.
At the bottom of the menu, select "Install Additional
Debuggers."
That opens the extensions panel and filters it by the
debugger category.
You should definitely check this out and see if there's a debugger
available for your favorite language.
You've now seen a couple of quick ways to get started debugging
your code,
but debugging is something you're going to do a lot of,
and there are additional settings and options you may want to take
advantage of every time you do it.
Up next, I'll show you how to do that with a feature known as
launch configurations.