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

Steps:

  1. Open Chrome's Developer tool F12.
  2. Press Ctrl+P in Chrome Dev Tools to search a TS file and open it.

Also, you can copy the filename from the code and paste it in the search inputbox.

This is the best approach.


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.

enter image description here