How to debug Angular with VSCode?

Steps to Debug Angular with VSCode

1. Install Required Extensions

First, ensure that the Angular Language Service and Debugger for Chrome extensions are installed in your VSCode. The Angular Language Service provides features such as code completion and error highlighting, while the Debugger for Chrome allows you to debug Angular applications directly within VSCode.

2. Configure the launch.json File

In VSCode, you need to configure a debug configuration file named launch.json. This file is typically located in the .vscode folder of your project. You can generate it automatically using the 'Add Configuration...' button in the Debug view, or create and edit it manually.

A basic launch.json configuration might look like this:

json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "breakpoints": "all"
        }
    ]
}

This configuration defines a Chrome browser debugging session that opens http://localhost:4200 (the typical development server address for Angular projects).

3. Start the Angular Application

Before debugging, ensure that your Angular application is running on the development server. Typically, this can be done by running the ng serve command in the terminal.

4. Start the Debug Session

After configuring the launch.json file, return to the VSCode Debug view, select the previously configured "Launch Chrome against localhost", and click the green "Start Debugging" button. VSCode will launch a new Chrome instance, load your Angular application, and connect the debugger.

5. Set Breakpoints and Inspect Code

Now you can set breakpoints in VSCode. Open the TypeScript file you want to debug, and click the blank area next to the line numbers to add breakpoints. When the code executes to these breakpoints, VSCode will automatically pause execution, allowing you to inspect variable values, call stacks, and evaluate expressions.

6. Use the Debug Panel

During the debugging session, VSCode's sidebar displays a debug panel containing sections such as "Variables," "Watch," "Call Stack," and "Breakpoints." These tools help you gain deeper insights into the application's runtime state and effectively analyze issues.

7. Modify Code and Reload

If you discover issues during debugging and make code changes, you can directly save the file in VSCode and refresh the Chrome browser to reload the application and continue debugging.

Example

Suppose we have an Angular project with a feature that calculates age based on the input birth year. We can set a breakpoint on the age calculation function to verify if the input year is correct and if the calculation result is accurate.

Conclusion

Debugging Angular with VSCode can significantly improve development efficiency. With integrated debugging tools, you can visually inspect and modify the application's runtime state. The steps above should help you configure and start debugging your Angular project.