Chrome 开发工具可以帮助找出 Angular 组件名称吗？

Posted 2023-03-07

【中文标题】Chrome 开发工具可以帮助找出 Angular 组件名称吗？

【英文标题】：Can Chrome Dev tools help figure out Angular component name?

【发布时间】：2019-04-29 15:15:09

【问题描述】：

假设我有应用程序的 Angular 源代码，我如何使用 Chrome 开发人员工具找出特定 Angular 组件的名称？

例如，假设应用程序使用了一个弹出对话框，我想找到该对话框的源代码。 Chrome 开发者工具可以帮我找出组件的名称吗？

到目前为止，我一直在 Chrome 开发工具中深入研究元素树，当我认为我有对话框的元素时，我会搜索 html 的角度代码。但是，我经常得到错误的匹配，这很耗时。我想知道是否有更好的方法我可能不熟悉。

【问题讨论】：

你为什么不用Augury？

【参考方案1】：

使用占卜：

您可以使用 Augury。这是一个 Chrome 和 Firefox 扩展程序，由 Rangle 的人管理。

安装后，只需打开 Chrome 开发工具（假设您使用的是 Chrome），它就会显示为工具中的选项卡之一。

您只需从网页中选择一个组件，它就会准确地标记您当时所在的组件。

使用ng.probe($0).componentInstance

您可以使用元素选项卡中的元素选择器选择组件。然后转到控制台选项卡，然后输入：

ng.probe($0).componentInstance

这将为您提供最近选择的组件的组件实例及其名称，然后您可以相应地查找它。像这样的：

注意：这些方法只能在 DEV 模式下工作。

【讨论】：

请注意，这只适用于在开发模式下构建的应用程序。

@IngoBürk，注意到。谢谢:)

【参考方案2】：

似乎ng.probe($0).componentInstance 不再适用于 Ivy。不过对我有用的是ng.getOwningComponent($0)。

检查查找的组件内的元素。 当元素仍处于选中状态时，在控制台中输入ng.getOwningComponent($0)。