vscode TypeScript debugging in Angular project with F5. Not breaking or in a wrong spot

Question

I read many related questions where debugging does not work. In my case it works but it's "weird". I set breakpoint at one line of code but it breaks in completely diferrent line. I feel it's related to source maps, but not sure what it is.

Environment:

• Latest vscode(1.21.1)
• Latest Chrome debugger extension installed
• Lastest npm/angular CLI
• Latest Chrome (65.0.33...)

Generated project using CLI with ng new

Following config added for F5 launcher(launch.json):

 "configurations": [        
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]

This is code of app.component.ts :

import { Component, OnInit } from '@angular/core';
import { isUndefined } from 'util';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = "Portal";

  ngOnInit(): void {

    this.test();
  }

  test() {
    const person = { FirstName: "John" };
    person.FirstName = "sf";

    let b = "test string";

    b = "other string";
  }
}

Set breakpoint on something like b = "other string"

Start as usual in terminal ng serve Click F5 - Chrome opens and displays main screen.

Problem 1: Chrome doesn't brake at all.

When I refresh Chrome page - Breakpoint get hit but in a wrong place. It can be in ngOnInit or on Component line, pretty "random".

Problem 2: Breaking happens on a wrong line

Is there any way to make this work so I can set and debug without pain using VSCode?

Answer 1

It's hard to say why things behave oddly with your setup. I also use VSCode to debug Angular apps and my setup works pretty well, I'll share it here so that hopefully it can be of help.

• Make sure you have the Chrome Debugger extension installed
• Modify your launch.json to look like this

 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:4200", "webRoot": "${workspaceRoot}", "sourceMaps": true, "userDataDir": "${workspaceRoot}/.vscode/chrome", "runtimeArgs": [ "--disable-session-crashed-bubble" ] }, { "name": "Attach Chrome", "type": "chrome", "request": "attach", "url": "http://localhost:4200", "port": 9222, "webRoot": "${workspaceRoot}", "sourceMaps": true } ] } 

• Serve your angular app with ng serve

You should now be able to start debugging your app (with F5 ) and all the breakpoints should work fine.

Answer 2

This seems to be related to this question:

Angular CLI 1.7.0 and Visual Studio Code - can't set breakpoints

The solution there was to install an older version of the angular cli.