angular - Chrome - 调试 Angular/Typescript - 如何导航到 ts 文件

Question

为了调试我的 Angular 前端，我在 Chrome 中打开开发工具和源选项卡，然后通过单击所有文件夹导航到 ts 文件，当我找到 ts 文件时，我设置了一个断点。然后返回使用该应用程序，然后开始调试。

虽然这可行，但必须深入了解文件夹...并查找 ts 文件非常耗时。随着项目的发展，我发现它变得越来越耗时。

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

有谁知道是否可以直接从页面转到ts文件？

我希望能够右键单击并选择一个菜单项以直接转到 ts 文件，就像 Inspect 对 HTML 文件的工作方式一样。

任何建议都应考虑到该项目相当大。我确实尝试过使用一些附加组件，但需要很长时间才能刷新，但无法使用。

有没有人有关于如何避免向下钻取文件夹以查找 ts 文件和设置断点的任何提示。如何以更快、更高效的方式实现这一目标？

感谢一百万，弗加尔。

Answer 1

Angular 使用 webpack，所有类型脚本文件都列在它下面。要选择目标 typescript 文件，请使用 Chrome 的开发者工具 (F12)。转到源选项卡，

选择 Chrome“webpack://”->“src/app”-> 你的 typescript 文件。

或者在旧版本的 chrome 中遵循这个路径“webpack://”->“.”->“src/app”-> 你的 typescript 文件(见图像文件)。

或 Ctrl+P 找到您的文件(如 fergal_dd 所建议)

然后在 ts 文件上设置调试行标记，并使用普通的 java 脚本键盘(F8、F10、F11 等)功能对其进行调试。