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?
