I have an Angular application that I am trying to debug in VS Code. When I write code in a particular typescript file and put a breakpoint on a method or statement, it is bound. But when I try to debug through Run > Start Debugging, the breakpoint becomes unbound. Once debugging starts, nothing happens afterwards. Neither does it hit the breakpoint, nor do the buttons (Step Over, Step Into, Run, etc.) of the floating debugging toolbar at the top get enabled. I followed this and this videos, and tried almost everything mentioned in this thread. But nothing solved my problem. I even upgraded node.js 17 to 18, yet of no avail. I tried multiple browsers like Edge, Chrome, Firefox and Opera. Debugging happens nowhere. So, what to do now to get VS Code debugging up and running? Because otherwise it is too cumbersome to use console.log(); every time to debug.

Please ask me if you need any more info of my code.

My environment:

  • OS - Windows 10
  • VS Code - 1.73.1
  • Node.js - 18.12.1
  • Angular CLI - 14.2.6

My launch.json file:

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Edge",
      "request": "launch",
      "type": "msedge",
      "sourceMaps": true,
      "trace": true,
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: test",
      "url": "http://localhost:9876/debug.html"
    }
  ]
}

My task.json file:

{
  // 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"
          }
        }
      }
    },
    {
      "type": "npm",
      "script": "test",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "bundle generation complete"
          }
        }
      }
    }
  ]
}

It could be you need the full Visual Studio and not the free VS Code. Visual Studio Code is an open source, free code editor that can be used with different programming languages like Angular, NodeJS, Java, JavaScript, C#, etc. VS Code can be integrated with git.

Try it with the full Visual Studio next time.

@rproffitt: For developing Node JS and Angular apps, VS Code is enough instead of downloading and installing the full Visual Studio, that takes a hell ream of time and memory. I am using VS Code for my application that is running Angular and Node JS only. The debugger of VS Code is supposed to work in this simple scenario, which it isn't.

I've used Visual Studio since about 1995. I took a look at VS Code and it fell short of the full Visio Studio so let's say you're right. Next stop is Microsoft themselves. But here's an idea. Sometimes I found I had to set the default associations of say html, htm and more back to stock. Didn't get to use Chrome. It had to be just as Microsoft set these on a clean install. Change the default browser to Chrome and debug broke. Such fun. But then again I had the full Visual Studio.

I think I need to add this: I won't setup a dev system to debug your issue. I will share what I ran into and what concerns I see.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.