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

Question

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

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

到目前为止，我一直在 Chrome Dev 工具中钻取元素树，当我认为我有对话框的元素时，我搜索 HTML 的 Angular 代码。但是，我经常得到错误的匹配，而且很耗时。我想知道是否有更好的方法我可能不熟悉。

Answer 1

使用占卜:

您可以使用 Augury .这是一个 Chrome 和 Firefox 扩展，由人们在 Rangle 管理.

安装后，只需打开 Chrome Dev Tools(假设您使用的是 Chrome)，它将作为工具中的选项卡之一可见。

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



使用 ng.probe($0).componentInstance
您可以使用“元素”选项卡中的“元素选择器”来选择一个组件。然后转到控制台选项卡，并输入:

ng.probe($0).componentInstance

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



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