为了调试我的Angular 前端，我打开Chrome中的开发工具和源代码选项卡，通过点击所有文件夹导航到ts文件，当我找到ts文件时，我设置了一个断点，然后返回使用应用程序，然后开始调试。
虽然这样做是可行的，但必须深入研究文件夹...并寻找ts文件是非常耗时的。随着项目的增长，我发现它变得更加耗时。
我还必须记住哪个TS文件与哪个页面相关联。
有人知道是否可以直接从页面转到ts文件吗？
我希望能够右键单击并选择一个菜单项，以检查HTML文件的工作方式直接进入ts文件。
任何建议都应该考虑到这个项目是相当大的。我确实尝试使用一些附加组件，但它花了很长时间来刷新是无法使用的。
有没有人有什么技巧可以帮助你避免在文件夹中查找ts文件和设置断点。如何才能更快、更有效地实现这一点？
非常感谢，弗格尔.
4条答案
按热度按时间qyuhtwio1#
Angular使用webpack，所有类型脚本文件都列在webpack下面。要选择目标类型脚本文件，请使用Chrome的开发工具（F12）。
选择Chrome“webpack：//"-〉“src/app”-〉您的打字脚本文件。
或者在旧版本的chrome中，按照以下路径：“webpack：//"-〉"."-〉“src/app”-〉您的打字脚本文件（参见图像文件）。
或者按Ctrl+P定位文件（如fergal_dd所建议）
然后在ts文件上设置调试行标记，并使用正常的java脚本键盘（F8、F10、F11等）功能对其进行调试。
dxxyhpgq2#
操作步骤：
1.打开Chrome的开发者工具F12。
1.在Chrome开发工具中按Ctrl+P搜索并打开TS文件。
此外，您还可以从代码中复制文件名并将其粘贴到搜索输入框中。
这是最好的方法。
velaa5lx3#
如果您正在使用Angular与VS代码，并希望在Chrome浏览器中调试，请按照以下步骤操作
1)安装Chrome Debugger Extension
2)安装后，调试插件图标会出现在左窗格。点击以打开新窗口。
3)现在选择Debug-〉Add Configuration。这将创建一个带有预填充值的Launch.json文件。用你的url和端口号更新它。
4)现在回到代码中，在任意位置添加断点。
5)在终端中启动你的应用程序（npm start）。再次从左窗格中选择调试插件按钮。它将列出所有断点。
6)选择Debug-〉Launch Chrome Against localhost选项。这将打开一个单独的chrome浏览器窗口，在vscode上，调试控件按钮将显示为类似于Visual studio。或者，您也可以使用键盘按钮来调试代码。请参见下图
vof42yt14#
打开开发人员控制台和
CTRL+P以查找您的文件