Chrome-调试Angular/Typescript-如何导航到ts文件 [英] Chrome - Debug Angular/Typescript - how to navigate to ts file

问题描述

要调试有角度的前端，我在Chrome和源"选项卡中打开开发工具，并通过在所有文件夹中单击鼠标右键来导航到ts文件，当我找到ts文件时，便设置了一个断点.然后重新使用该应用程序，然后开始调试.

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.

尽管这可行，但必须深入浏览文件夹...并寻找ts文件是很费时间的.随着项目的发展，我发现它变得越来越耗时.

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.

我还必须记住哪个TS文件与哪个页面相关联.

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

有人知道是否可以直接从页面转到ts文件吗?

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

我希望能够右键单击并选择一个菜单项，以Inspect对HTML文件的工作方式完全直接进入ts文件.

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.

在避免如何深入浏览文件夹以查找ts文件和设置断点方面，是否有人有任何提示.如何以更快，更有效的方式实现这一目标?

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 ?

感谢一百万， 弗加尔(Fergal).

Thanks a million, Fergal.

推荐答案

步骤:

1. 打开Chrome的开发者工具 F12 .
2. 在Chrome开发工具中按 Ctrl + P 搜索TS文件并打开它.

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.

这是最好的方法.

这篇关于Chrome-调试Angular/Typescript-如何导航到ts文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！