[英]Can Chrome Dev tools help figure out Angular component name?
Assuming that I have the Angular source code for the application, how can I use Chrome Developer tools to figure out the name of a specific Angular component?假设我有应用程序的 Angular 源代码,我如何使用 Chrome Developer 工具找出特定 Angular 组件的名称?
For example, let's say the application makes use of a popup dialog box and I want to find the source code for the dialog box.例如,假设应用程序使用了一个弹出对话框,我想找到该对话框的源代码。 Can Chrome Developer tools help me figure out then name of the component?
Chrome 开发人员工具可以帮助我找出组件的名称吗?
So far I have been drilling down the elements tree in Chrome Dev tools and when I think I have the element for the dialog box I search the angular code for the HTML.到目前为止,我一直在 Chrome Dev 工具中钻取元素树,当我认为我有对话框的元素时,我搜索 HTML 的角度代码。 However, I often get false matches and it is time consuming.
但是,我经常得到错误的匹配,而且很耗时。 I was wondering if there was a better way I might not be familiar with.
我想知道是否有更好的方法我可能不熟悉。
You can use Augury .您可以使用占卜。 It's a Chrome and Firefox Extension Managed by the folks at Rangle .
它是由Rangle 人员管理的 Chrome 和 Firefox 扩展。
Once you've installed it, just open Chrome Dev Tools(assuming you're using Chrome), and it will be visible as one of the Tabs in the tools.安装后,只需打开 Chrome Dev Tools(假设您使用的是 Chrome),它将作为工具中的选项卡之一可见。
You can simply select a Component from the Web page and it is going to accurately mark the Component that you were on as of then.您只需从网页中选择一个组件,它就会准确地标记您当时所在的组件。
ng.probe($0).componentInstance
ng.probe($0).componentInstance
You can select a component using the Element Selector from the Elements Tab.您可以使用“元素”选项卡中的“元素选择器”来选择一个组件。 And then go to the Console Tab, and type in:
然后转到控制台选项卡,并输入:
ng.probe($0).componentInstance
This is going to give you the Component Instance of the recently selected Component along with its name and then you can look for it accordingly.这将为您提供最近选择的组件的组件实例及其名称,然后您可以相应地查找它。 Something like this:
像这样的东西:
NOTE: There methods would only work in DEV mode.注意:这些方法只能在 DEV 模式下工作。
It seems that ng.probe($0).componentInstance
doesn't work any more with Ivy.似乎
ng.probe($0).componentInstance
不再适用于 Ivy。 What worked with me though is ng.getOwningComponent($0)
.不过对我
ng.getOwningComponent($0)
是ng.getOwningComponent($0)
。
ng.getOwningComponent($0)
in the console.ng.getOwningComponent($0)
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.