Debugging the Angular app

Extensions are one of the most important features of VS Code, and we have explored this utility several times in the previous chapters. VS Code is supported by an extensive list of debugging extensions, which we will see in the following subsections.

Installing the debugger for Chrome

The first extension we will look at is the Debugger for Chrome extension. Let's install it:

1. Go ahead and install it from the EXTENSIONS tab, as illustrated in the following screenshot:

   Figure 6.3 – Debugger for Chrome extension

2. Once the extension is installed, go to the Debugger tab, or press Ctrl + Shift + D. As shown in Figure 6.4, VS Code will ask you to create a launch.json file. This launch file contains the configuration for the debugger, and the message to create it can be seen here:

   Figure 6.4 – Option to create a debugger launch.json file

3. On clicking create a launch.json file, the Command Palette will open and ask for the environment...