Могут ли инструменты Chrome Dev помочь определить имя компонента Angular?

Question

Предполагая, что у меня есть исходный код Angular для приложения, как я могу использовать инструменты Chrome Developer для определения имени определенного компонента Angular?

Например, допустим, приложение использует всплывающее диалоговое окно, и я хочу найти исходный код для этого диалогового окна.Могут ли инструменты Chrome Developer помочь мне определить имя компонента?

До сих пор я детализировал дерево элементов в инструментах Chrome Dev, и когда мне кажется, что у меня есть элемент для диалогового окна, я выполняю поиск углового элемента.код для HTML.Однако я часто получаю ложные совпадения, и это отнимает много времени.Мне было интересно, есть ли лучший способ, с которым я, возможно, не знаком.

Answer 1

Использование Augury:

Вы можете использовать Augury .Это расширение для Chrome и Firefox. Управляется людьми по адресу Rangle .

После установки просто откройте Chrome Dev Tools (при условии, что вы используете Chrome), и он будет виден как одна из вкладок в инструментах.

Вы можете просто выбрать Компонент на веб-странице, и он точно пометит Компонент, на котором вы были на тот момент.

Использование ng.probe($0).componentInstance

Вы можете выбрать компонент, используя Выбор элементов на вкладке Элементы.А затем перейдите на вкладку «Консоль» и введите:

ng.probe($0).componentInstance

Это даст вам Экземпляр компонента недавно выбранного Компонента вместе с его именем, а затем вы сможете найти его соответствующим образом.Примерно так:

ПРИМЕЧАНИЕ: Там методы будут работать только в режиме DEV.