CODEWITHSUNDEEP
angularjsgoogle-chrome-devtools
Tony_Henrich
Tony_Henrich

Reputation: 44205

How to easily know where a function is defined or implemented in Chrome dev tools? Function is used in an AngularJS attribute

If I have an AngularJS app and I see this <li ng-show="vm.CanUse('a-b-c')" ng-class.. in the Elements tab in Chrome dev tools, is there a way to quickly and easily navigate to where the CanUse function is defined?

I know I can do a search with ctrl-shift-F in the Source tab but if I have a ton of files which use the function or have multiple implementations with the same name, it can take me a while to find the implementation I want.

I tried something like this: <li ng-show="debugger;vm.CanUse('a-b-c')" ng-class.. expecting to break into the debugger but it didn't work.

Any suggestions?

Upvotes: 0

Views: 200

Answers (1)

Charlie Dalsass
Charlie Dalsass

Reputation: 2014

There is a special AngularJS debug extension called Batarang for this type of scope level debugging. However, it requires a plugin.

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

Once you are in "elements" pane, click the function definition. Next, click $scope tab. Then "show function definition". See image below.

From there you should be able to click a "blue breakpoint" (left margin, near line number) for debugging.

Execute the function (clicking button etc) and the debugger should stop at that function.

enter image description here

Upvotes: 2

Related Questions