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

问题描述

为了调试我的 Angular 前端，我在 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 ?

谢谢一百万，弗格尔.

推荐答案

步骤:

1. 打开 Chrome 的开发者工具 F12.
2. 在 Chrome Dev Tools 中按 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屋！