Chrome - Debug Angular/Typescript - how to navigate to ts file

Question

To debug my angular front end, I open the dev tools in Chrome and the sources tab and navigate to the ts file by clicking down through all the folders and when I do find the

Answer 1

Angular uses webpack and all type script files are listed under it. To select your target typescript file, Chrome's Developer tool (F12). Go to Source tab an select "webpack://"->"."->"src/app" -> your typescript file ( See the image file).

Then set the debug line marker on ts file and use normal java script keyboard(F8, F10, F11 etc) feature to debug it.