Enjoy free content straight from your inbox 💌
00:00
Something that can greatly enhance your developer experience. When you are learning a new programming language is the ability to debug your application, and that's quite easy to do with JavaScript. So let's take a look. Here's a simple program that logs HelloWorld to the console. Now, of course, console log by itself is actually a great way that you can use to debug your application. In addition to that, the JavaScript runtime provides a debugger statement, which can be used to pause our application at a particular point in time so that we can inspect the state of our application logic. Now, if we actually execute our application without attaching a debugger,
00:34
the debugger statement is ignored by the JavaScript runtime. And you can see this over here, our application executed completely without pausing at that debug statement. Now, visual Studio Code actually comes with a number of tools, which we can use to debug our JavaScript. You can find them in the run panel on the left. From here, we can click on run and debug, and this will give us the option of how we want to execute our JavaScript and then attach a debugger. The simplest option, of course, is to select node js, which provides us a nice isolated environment to learn JavaScript by itself. This starts executing our application using node js and pauses our application
01:12
at that debugger statement. To resume execution, we can press the continue button. Once we resume, the console log statement occurs and the program terminates. Now, debugger statements are great when you are not debugging within your I D E, but when you are using an I D E, there is actually a better way where you can simply click on the sidebar next to your source code and that will actually create what is known as a breakpoint. And this will essentially behave like a debugger statement, but you do not need to modify any of the source code when you have breakpoints within your application.
01:45
You can see them within the breakpoint panel within VS code with this breakpoint created, let's run a debugger application again, and now you can see that we are paused at that consult log statement. Once you are happy with your debug session, you can press the resume button to let the program execute to completion. There are lots of other features provided by the VS. Code debugger, like the ability to watch and modify variables. Look at the call stack when we are working with functions. So I encourage you to keep playing around with the debugger as we look at more and more child skill features.