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

Chrome - Debug Angular/Typescript - how to navigate to ts file

提问by fergal_dd

To debug my angular front end, I open the dev tools in Chrome and the sources tab and navigate to the ts file by clicking down through all the folders and when I do find the ts file, I then set a breakpoint. and go back to using the application and then start debugging.

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

While this works, it is time consuming to have to drill down through folders... and look for the ts file. As the project has grown, I find it is becoming even more time consuming.

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

I also have to remember which TS file is associated with which page.

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

Does anyone know if it is possible to go directly from the page to the ts file ?

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

I would love to be able to right click and select a menu item to go directly to the ts file in exactly the way Inspect works for HTML files.

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

Any suggestions should consider that the project is quite large. I did try to use some add-on but it took ages to refresh was unusable.

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

Does anyone have any tips on how to avoid drilling down through the folders to find the ts file and setting the breakpoint. How can this be achieved in a much faster, efficient way ?

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

Thanks a million, Fergal.

感谢一百万，弗格尔。

采纳答案by fergal_dd

Steps:

脚步：

1. Open Chrome's Developer tool (F12).
2. Press [Ctrl]+[P] in Chrome Dev Tools to search a TS file and open it.

1. 打开 Chrome 的开发者工具 (F12)。
2. 在 Chrome Dev Tools 中按 [Ctrl]+[P] 搜索 TS 文件并打开它。

Also, you can copy the filename from the code and paste it in the search inputbox.

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

This is the best approach.

这是最好的方法。

回答by kumar chandraketu

Angular uses webpack and all type script files are listed under it. To select your target typescript file, Chrome's Developer tool (F12). Go to Source tab an select "webpack://"->"."->"src/app" -> your typescript file ( See the image file).

Angular 使用 webpack，所有类型脚本文件都列在它下面。要选择目标打字稿文件，请使用 Chrome 的开发人员工具 (F12)。转到“源”选项卡，然后选择“webpack://”->“.”->“src/app”-> 您的打字稿文件（请参阅图像文件）。

Then set the debug line marker on ts file and use normal java script keyboard(F8, F10, F11 etc) feature to debug it.

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

回答by kumar chandraketu

If you are using Angular with VS code and want to debug in Chrome browser follow this step

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

1) Install Chrome Debugger Extension

1) 安装Chrome 调试器扩展

2) After installation, debug plugin icon will appear in left pane. Click to get the new window.

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

3) Now select Debug-> Add Configuration. This will create Launch.json file with pre populated values. Update it with your url and port number.

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

4) Now go back to your code and add break point wherever you like.

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

5) Launch your application in terminal (npm start). Select debug plugin button again from left pane. it will have all the breakpoints listed.

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

6) Select Debug-> Launch Chrome Against localhost option. This will open a separate chrome browser window and on vscode, debug controls button will appear similar to Visual studio alternatively you can use keyboard buttons also to debug the code. See the image below

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

回答by Abdus Salam Azad

Open developer console and CTRL+Pto find your file

打开开发者控制台并CTRL+P找到您的文件