31

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.

Improve this question
3
  • 9
    You can press [Ctrl]+[P] in Chrome Dev Tools to search a TS file and open it. That what I do : copy the filename from VSCode and paste it in the search inputbox. It's not much but it saves us some time. Commented Oct 13, 2017 at 19:40
  • Thanks Romain. I am using this approach now. Saving me plenty of time. Thanks! Commented Oct 24, 2017 at 15:40
  • Use Chrome Debugger Extension for Vscode. see the new answer. Commented Jan 5, 2019 at 22:09

4 Answers 4

Reset to default
54

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,

Select Chrome "webpack://"->"src/app" -> your typescript file.

Or in older version of chrome follow this path "webpack://"->"."->"src/app" -> your typescript file ( See the image file).

Or Ctrl+P to locate your file(as suggested by fergal_dd)

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This is the correct and very helpful answer and should be marked as such
better to simply use Ctrl+P to navigate directly to it rather than having to open the source tab. Much faster when you use the Ctrl+P approach (as you will discover yourself).
pretty cool, but with ctrl+p I have listed only .less files
37

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.

Improve this answer

2 Comments

In my case Ctrl + P is not working. if i tried to search required tsx file but it is not showing ts file
@AjayGupta are you using Chrome and have you followed Step 1 (F12) ?
4

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

enter image description here

Improve this answer

Comments

-1

Open developer console and CTRL+P to find your file

Improve this answer

3 Comments

Too vague without explaining what CTRL + P does or how to use it.
Do you know what is developer console?
How to do when *.ts files aren't showed ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.