Debugging features of VS Code

We have set up VS Code for debugging our Angular frontend. Since we will require a code base to debug, here we will use the Angular app to explore different debugging features of VS Code. However, these features are common to other languages and can be used for debugging other code bases as well.

Exploring breakpoints

One of the most common techniques for debugging code is by placing breakpoints. Breakpoints tell the application to stop and transfer control to the debugger, from where the developer can execute the code line by line and check for errors. Let's look at how we can use breakpoints in VS Code.

Creating a breakpoint

Setting a breakpoint is pretty simple—click beside the line number where you want the debugger to stop, as illustrated in the following screenshot:

Figure 6.6 – Breakpoint set on line number 18

Figure 6.6 shows a breakpoint set in the ngOnInit() method of JobrequestlistComponent...