Angular Debug Chrome Launch.json - Javascript

Introduction

Debugging Angular applications in Google Chrome browser can be a daunting task, especially when you have a complex codebase. The launch.json file used in Visual Studio Code can help to streamline the process and make debugging a lot easier.

This guide will take you through the process of setting up your Angular project for debugging using the launch.json file in Visual Studio Code.

Prerequisites

Before you begin, make sure you have the following installed:

• Visual Studio Code
• Google Chrome browser
• Angular CLI

Setting Up launch.json

1. Open your Angular project in Visual Studio Code.
2. Click on the Debug icon in the left-hand sidebar or press Ctrl+Shift+D.
3. Click on the gear icon in the top-right corner to open the Debug Configuration dropdown menu.
4. Click on Add Configuration and select Chrome from the dropdown list.
5. Update the generated launch.json file to include the following configuration settings:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

• Launch Chrome against localhost configuration launches a new instance of Google Chrome browser and connects to the Angular application running on localhost at port 4200.
• Attach to Chrome configuration lets you attach the Google Chrome browser instance to Visual Studio Code for debugging purposes.

Running the Debugger

1. Start your Angular application by running ng serve in your terminal or command prompt.
2. Click on the Debug icon in the sidebar or press Ctrl+Shift+D.
3. Select Launch Chrome against localhost from the dropdown configuration menu.
4. Click on the green Play button to start the debugger.
5. The Google Chrome browser will open and connect to the Angular application running on localhost.
6. You can now interact with your application and set breakpoints in your code to debug it.

Conclusion

Debugging Angular applications in Google Chrome browser can be made easier by setting up the launch.json file in Visual Studio Code. With this configuration, you can easily connect to your Angular application running on localhost and set breakpoints in your code to debug it.