Display which directives are being used on the page

Question

Is there any way we can find out which directives are being used on a page ?

Below follows an example

<div>
algumas coisas ...
<minhadiretiva></minhadiretiva>
<minhadiretiva1></minhadiretiva1>
<minhadiretiva2></minhadiretiva2>
outras coisas ...
</div>

And here’s the html from "my friend"

<div>
<minhadiretivafilha></minhadiretivafilha>
<minhadiretivafilha1></minhadiretivafilha1>
<minhadiretivafilha2></minhadiretivafilha2>
</div>

Question 1: How can I view the list of directives that have been used on this page ? (for example on the console or somewhere else)

The answer to this question should be

minhadiretiva, minhadiretivafilha, minhadiretivafilha1, minhadiretivafilha2, minhadiretiva1, minhadiretiva2

Question 2: If there is an answer to question 1, is there a way to "discover" the directives used using only the browser console ? Or do I need my directives to follow some kind of pattern ? (e.g., some attribute or something like that)

NOTE: I asked this same question in the gringo stackoverflow, but I did not get much interest from the community in answering this question. The idea is to bring that doubt here and see if our community is more interested in answering it.

Answer 1

There are two options (which I know):

• Add console.log manually;
• Angularjs Batarang - Extension for Chrome;

With the use of the console, it is very simple and straightforward, just add one at the beginning of each directive and write some identification for it. For example:

app.directive('minhaDiretiva', function() {
    console.log('minhaDiretiva');
});

The problem of this is that it is done manually, so it can be 'laborious''.

---

The other method is to use the Angularjs Batarang, an extension to Chrome that serves as an application analysis tool. It shows all the structural scope of your application, number of Watchers, functions, the time each thing is taking from your application, etc.. It is an analysis tool for you to better analyze your project.

It will not be so simple to identify the directives if you have a very complex project, with several directives used together and so on... But it is an EXCELLENT tool and for sure you can do a great project debug.