[Edit] Don’t return 100% watchers in several cases.. :(
Use Chrome Batarang extension to do that better.
Here is a quick way to know how many watchers are running and which expressions are parsed in a specific part and at any moment of your angular app lifecycle.
You can test it before and after an action to view the difference.
How it works
Paste this code inside your console with your angular app running
Call it from the console
selector could be a DOM element, a jQuery object or a css selector (String).
showExp is a boolean to tell if you want to output expressions foud or not.
Warning, if your selector is a jQuery object, it should contain only one element. It is true for your css selector too!
Warning, if you have too much watchers to be listed in the console, you can extend the log limit of Firebug (with Firefox):
about:configand change this var:
extensions.firebug.console.logLimit = 1200
Count watchers and output expressions inside the current selected DOM element in the HTML Firebug panel (Elements panel inside Chrome). In fact, I always use it like that.
Switching between Console panel and HTML/Elements panel is the best way to know which parts of your app are gourmand and it’s an interesting way to ‘look under the hood’ of famous angular app too! :)
Count watchers inside MenuCtrl, be careful, it will works only if the controller was include with an
ng-controller, not if a directive included it.
Count watchers and output expressions inside the first instance of
myCustomDirective, it will works only if there is not a
replace: true inside it.
Idem, but this case I used the HTML panel of Firebug (Elements panel inside Chrome) to select the element I want and
Copy CSS path. Sometimes a
nth-child() is needed to complete the
This code haven’t been tested in all situations, tell me if you have problems!