Debug the visual studio code on local system

To debug Angular applications in Visual Studio Code, you can use the built-in debugger along with the Chrome/Edge browser. Here's a step-by-step guide:

1. Install the "Debugger for Chrome" Extension

• Open Visual Studio Code.
• Go to the Extensions view by clicking on the Extensions icon in the Activity Bar or pressing Ctrl + Shift + X.
• Search for "Debugger for Chrome" (or Edge if preferred).
• Install the extension.

2. Configure the Debugger in launch.json

You need to create a launch.json configuration file that tells VS Code how to run the debugger.

• Open your Angular project in Visual Studio Code.
• Go to the Run and Debug tab by clicking the play icon in the Activity Bar or pressing Ctrl + Shift + D.
• Click on "create a launch.json file" (if it doesn't exist) and select the Chrome configuration from the dropdown.
• Replace the default configuration with the following:

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

3. Start Your Angular App

Before you start debugging, make sure your Angular app is running. Open a terminal and run:

bash
ng serve

This will start the Angular app at http://localhost:4200.

4. Start Debugging in VS Code

• Go to the Debug tab (Run and Debug) or press Ctrl + Shift + D.
• Select "Launch Chrome against localhost" from the dropdown in the Debug tab.
• Click the green Start Debugging button (or press F5).

VS Code will launch Chrome, open your Angular app at http://localhost:4200, and attach the debugger.

5. Set Breakpoints

• Open the TypeScript file you want to debug.
• Set breakpoints by clicking in the gutter (left margin) next to the line numbers.
• Once the debugger hits a breakpoint, you can step through the code using the following debug controls:
  • Continue (F5): Continue to the next breakpoint.
  • Step Over (F10): Step over to the next line of code.
  • Step Into (F11): Step into a function or method.
  • Step Out (Shift + F11): Step out of the current function.

6. Inspect Variables and Watch Expressions

• Variables Panel: Use the Variables panel to inspect local variables at the current breakpoint.
• Watch Panel: Add expressions to the Watch panel to monitor their values throughout the debugging session.
• Call Stack Panel: Use the Call Stack panel to see the function call hierarchy.

7. Optional: Edge Debugging

If you prefer to debug in Edge, install the Debugger for Microsoft Edge extension and replace the launch.json Chrome configuration with Edge:

json
{
  "type": "pwa-msedge",
  "request": "launch",
  "name": "Launch Edge against localhost",
  "url": "http://localhost:4200",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "trace": true,
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/src/*"
  }
}

8. Restart Debugging

If you make changes to your code, simply restart the debugger or press Ctrl + Shift + F5 to restart the session.

This setup allows you to efficiently debug Angular code within Visual Studio Code!