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

Question

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

虽然这样做有效，但是必须深入查看文件夹...并查找ts文件。随着项目的发展，我发现它变得更加耗时。

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

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

我希望能够右键单击并选择一个菜单项直接转到ts文件，其方式与Inspect适用于HTML文件的方式完全相同。

任何建议都应该考虑到项目规模很大。 我确实尝试使用一些附加组件，但刷新的时间很长，无法使用。

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

万分感谢 Fergal。

Answer 1

Angular使用webpack，并且所有类型的脚本文件都在下面列出。要选择目标打字稿文件，请使用Chrome的开发者工具（F12）。转到“源”选项卡，选择“ webpack：//”->“。”->“ src / app”->您的打字稿文件（请参见图像文件）。

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

Answer 2

步骤：

1. 打开Chrome的开发者工具（F12）。
2. 在Chrome开发者工具中按[Ctrl] + [P]可以搜索并打开TS文件。

此外，您可以从代码中复制文件名 并将其粘贴到搜索输入框中。

这是最好的方法。

Answer 3

如果您将Angular与VS代码一起使用，并想在Chrome浏览器中进行调试，请按照以下步骤操作

1）安装Chrome Debugger Extension

2）安装后，调试插件图标将出现在左窗格中。单击以获取新窗口。

3）现在选择“调试”->“添加配置”。这将创建具有预填充值的Launch.json文件。使用您的网址和端口号进行更新。

4）现在返回您的代码，并在任意位置添加断点。

5）在终端中启动应用程序（npm start）。从左窗格再次选择调试插件按钮。它将列出所有断点。

6）选择“调试”->“针对本地启动Chrome”选项。这将打开一个单独的Chrome浏览器窗口，在vscode上，调试控件按钮的外观将类似于Visual Studio，或者您也可以使用键盘按钮来调试代码。参见下图

Answer 4

打开开发人员控制台，然后CTRL+P查找文件