debugging

This article discuss how to debug Angular/Node.js application in WebStorm and VSCode.

Debug Angular app

WebStorm

1. Start angular application

   npm start // or ng serve

2. Set breakpoints in the source code in WebStorm Editor.
3. Press Ctrl + Shift + Click on the URL in the terminal to open the browser.
   
4. See here for more details.

VSCode

Launch with task file

1. Create file launch.json under .vscode folder in project root.

   {
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
       {
         "name": "debug angular app",
         "type": "chrome",
         "request": "launch",
         "preLaunchTask": "npm: start",
         "url": "http://localhost:4200/"
       },
     ]
   }

2. Create file task.json under .vscode folder in project root.

   {
     // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
     "version": "2.0.0",
     "tasks": [
       {
         "type": "npm",
         "script": "start",
         "isBackground": true,
         "problemMatcher": {
           "owner": "typescript",
           "pattern": "$tsc",
           "background": {
             "activeOnStart": true,
             "beginsPattern": {
               "regexp": "(.*?)"
             },
             "endsPattern": {
               "regexp": "bundle generation complete"
             }
           }
         }
       },
     ]
   }

3. Click Run and Debug in VSCode’s left side menu. // number 1 on picture below
4. Select debug angular app in the dropdown list. // number 2 on picture below
5. Click the Debug icon or Press F5 to start debugging. // number 3 on picture below
   
   In this way, VSCode will open a new Chrome window and you can debug the Angular app in VSCode.

Launch without task file

If you don’t want to use task.json file, you can remove it and delete preLaunchTask in launch.json file. Then

1. Manually start the Angular app by npm start in terminal.
2. Click the Debug icon or Press F5 to start debugging in VSCode.
   In this way you need to manually open the browser and navigate to http://localhost:4200/ to debug the Angular app.

Browser

No matter you use WebStorm or VSCode, you can also debug Angular app in browser.

1. Run your angular app by npm run start or ng serve
2. Open the browser and navigate to http://localhost:4200/.
3. Press F12 to open the developer tools and switch to Source tab.
4. Set breakpoint in your source code in browser. see here for more details.
   1. If you use webpack, the source file was in webpack://src folder.
   2. If you use ESBuild + Vite, the source files were in src folder.
5. Refresh the page to trigger the breakpoints.