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 ts file, I then set a breakpoint. and go back to using the application and then start debugging.

While this works, it is time consuming to have to drill down through folders... and look for the ts file. As the project has grown, I find it is becoming even more time consuming.

I also have to remember which TS file is associated with which page.

Does anyone know if it is possible to go directly from the page to the ts file ?

I would love to be able to right click and select a menu item to go directly to the ts file in exactly the way Inspect works for HTML files.

Any suggestions should consider that the project is quite large. I did try to use some add-on but it took ages to refresh was unusable.

Does anyone have any tips on how to avoid drilling down through the folders to find the ts file and setting the breakpoint. How can this be achieved in a much faster, efficient way ?

Thanks a million, Fergal.

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.

Answer 2

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.