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

If you are using Angular with VS code and want to debug in Chrome browser follow this step

1) Install Chrome Debugger Extension

2) After installation, debug plugin icon will appear in left pane. Click to get the new window.

3) Now select Debug-> Add Configuration. This will create Launch.json file with pre populated values. Update it with your url and port number.

4) Now go back to your code and add break point wherever you like.

5) Launch your application in terminal (npm start). Select debug plugin button again from left pane. it will have all the breakpoints listed.

6) Select Debug-> Launch Chrome Against localhost option. This will open a separate chrome browser window and on vscode, debug controls button will appear similar to Visual studio alternatively you can use keyboard buttons also to debug the code. See the image below