Chrome - 调试Angular/Typescript - 如何导航到ts文件
fer*_*_dd 15 debugging google-chrome google-chrome-extension typescript angular
要调试角度前端,我打开Chrome和源选项卡中的开发工具,然后通过单击所有文件夹导航到ts文件,当我找到ts文件时,然后设置断点.然后返回使用该应用程序,然后开始调试.
虽然这很有效,但是必须深入了解文件夹...并查找ts文件.随着项目的发展,我发现它变得更加耗时.
我还必须记住哪个TS文件与哪个页面相关联.
有谁知道是否可以直接从页面转到ts文件？
我希望能够右键单击并选择一个菜单项直接转到ts文件,其方式与Inspect适用于HTML文件的方式完全相同.
任何建议都应该考虑到项目非常大.我确实尝试使用一些附加组件,但需要花费很长时间才能刷新无法使用.
有没有人有任何关于如何避免向下钻取文件夹以找到ts文件和设置断点的提示.如何以更快,更有效的方式实现这一目标？
万分感谢Fergal.
kum*_*etu 27
Angular使用webpack,并在其下列出所有类型的脚本文件.要选择目标打字稿文件,请使用Chrome的开发人员工具(F12).转到"源"选项卡,选择"webpack://" - >"." - >"src/app" - >您的打字稿文件(请参阅图像文件).
然后在ts文件上设置调试行标记,并使用普通的java脚本键盘(F8,F10,F11等)功能进行调试.
- 这是正确且非常有帮助的答案，应该如此标记 (2认同)
- 最好只使用Ctrl + P直接导航到它，而不用打开“源”选项卡。使用Ctrl + P方法时，速度会更快（因为您会发现自己）。 (2认同)
fer*_*_dd 12
脚步：
- 打开Chrome的开发者工具（F12）。
- 在Chrome开发者工具中按[Ctrl] + [P]搜索TS文件并打开。
另外，您可以从代码中复制文件名并将其粘贴到搜索输入框中。
这是最好的方法。
- 谢谢， ctrl + p 是我想要的键！ (3认同)
| 归档时间： |
|
| 查看次数： |
13120 次 |
| 最近记录： |