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

【问题标题】：Chrome - Debug Angular/Typescript - how to navigate to ts fileChrome - 调试 Angular/Typescript - 如何导航到 ts 文件
【发布时间】：2018-03-24 16:22:27
【问题描述】：

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

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

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

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

我希望能够右键单击并选择一个菜单项以直接转到 ts 文件，这与 Inspect 对 HTML 文件的工作方式完全相同。

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

有没有人有任何关于如何避免深入文件夹以找到 ts 文件并设置断点的提示。如何以更快、更有效的方式实现这一目标？

谢谢一百万，弗格尔。

【问题讨论】：

您可以在 Chrome 开发工具中按 [Ctrl]+[P] 搜索 TS 文件并打开它。这就是我所做的：从 VSCode 复制文件名并将其粘贴到搜索输入框中。虽然不多，但它为我们节省了一些时间。
谢谢罗曼。我现在正在使用这种方法。节省了我很多时间。谢谢！
为 Vscode 使用 Chrome 调试器扩展。查看新答案。

标签： angular google-chrome typescript debugging google-chrome-extension

【解决方案1】：

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

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

【讨论】：

这是正确且很有帮助的答案，应该这样标记
最好简单地使用 Ctrl+P 直接导航到它，而不必打开源选项卡。使用 Ctrl+P 方法时速度会快得多（您会发现自己）。
很酷，但是使用 ctrl+p 我只列出了 .less 文件

【解决方案2】：

步骤：

打开 Chrome 的开发者工具 F12。
在 Chrome 开发工具中按 Ctrl+P 搜索 TS 文件并将其打开。

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

这是最好的方法。

【讨论】：

谢谢，ctrl + p 是我想要的键！

【解决方案3】：

如果您使用 Angular 和 VS 代码并想在 Chrome 浏览器中进行调试，请按照此步骤操作

1) 安装Chrome Debugger Extension

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

3) 现在选择调试-> 添加配置。这将创建具有预填充值的 Launch.json 文件。用你的 url 和端口号更新它。

4) 现在回到您的代码并在任何您喜欢的地方添加断点。

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

6) 选择 Debug-> Launch Chrome Against localhost 选项。这将打开一个单独的 chrome 浏览器窗口，在 vscode 上，调试控件按钮将出现类似于 Visual Studio 或者您也可以使用键盘按钮来调试代码。见下图

【讨论】：

【解决方案4】：

打开开发者控制台和CTRL+P 找到你的文件

【讨论】：

太模糊了，没有解释 CTRL + P 做什么或如何使用它。
你知道什么是开发者控制台吗？
*.ts文件不显示怎么办？