Debugging an Angular project in 2 minutes

Author owns image rights. Icons from app developers.

Debugging web applications can be a bit complex, especially when working with complex frameworks like in this case Angular. However, with the necessary knowledge, this process can be more manageable and efficient. In this article, we will take a look at the steps required to configure and use the VSCode debugging tools in an Angular project.

What is Angular?

Angular is a frontend development framework created and maintained by Google. Using TypeScript, it allows developers to build dynamic and scalable web applications; with features such as bidirectional data binding, dependency injection and routing. Angular makes it easy to create reusable components and efficiently manage complex applications. Its modular architecture and robust ecosystem of tools make it a popular choice for projects of any size.

How can we debug our project?

First we will have to have an Angular project already created.
Once we have the project open we will go to the Run and Debug option found in the Visual Studio Code sidebar. Inside it, just to the right of the selector of where we want to debug our project, we will press the button with the gear icon. This will open a file called launch.json and once opened, copy the following code snippet into it:

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "meteor://💻app/*": "${workspaceFolder}/*",
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack://?:*/*": "${workspaceFolder}/*"
      }
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: test",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "./src/*": "${workspaceFolder}/src/*"
      }
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
    }
  ]
}

Next we will open the package.json file of our project and change the value of the following command:

"start": "ng serve --host=127.0.0.1"

Finally, we will establish a breakpoint where we want to debug the code and we will execute the command npm run start in our terminal.

Once the project is initialised, we will go to the Run and Debug section of Visual Studio Code and we will also initialise it by clicking Play, thus opening Google Chrome.
If at any time, the terminal asks us if we want to initialise the debugging on another port, we will specify no, as we want to debug what is on the executed port.

Conclusion

Mastering debugging in Angular with VSCode is a valuable skill for any developer. Not only does it streamline the development process, but it also contributes to creating more robust and reliable applications. I hope you found this guide useful and I encourage you to continue exploring and honing your debugging skills.