CODEWITHSUNDEEP
angularjsangularjs-scope
themikelee
themikelee

Reputation: 41

How can I find where an AngularJS scope visible in Batarang came from?

I am looking at my angular app in Batarang and one of the scopes has some values that I don't recognize. How can I find out what created that scope?

I've already tried searching the DOM for the class ng-scope. Here is the solution I came up with for that if anyone is interested. The function takes in the scope id displayed in Batarang.

function getElementByScopeId(scopeId) {
    var i;
    var scopesInDom = angular.element('.ng-scope');
    for (i=0; i < scopesInDom.length; i++) {
        if (angular.element(scopesInDom[i]).scope().$id === scopeId) {
            return scopesInDom[i];
        }
    }
};

This works fine for most of the scopes I see in Batarang but can't find the one I'm looking for. I assume this is because it was removed from the DOM at some point. Is there another way to find the source of a scope?

Edit: Found it. But only because there's very little code in my app that I'm not intimately familiar with. It was in a module I'm including, one of the few pieces I didn't write. The reason the above function couldn't find it was because it was never on the DOM. It was created using $rootScope.new(true); inside of a factory. So the question remains. Is there any way for me to find the code for a scope created this way from info available in Batarang?

Upvotes: 2

Views: 1008

Answers (1)

themikelee
themikelee

Reputation: 41

Here is the best I could come with.

First (as shown in the question) check to see if your scope is on the dom. Most scopes created by directives can be found this way.

Enter this in the browser console:

function getElementByScopeId(scopeId) {
    var i;
    var scopesInDom = angular.element('.ng-scope');
    for (i=0; i < scopesInDom.length; i++) {
        if (angular.element(scopesInDom[i]).scope().$id === scopeId) {
            return scopesInDom[i];
        }
    }
};

Then if, for example, the scope id you're looking for is 005 you can run getElementByScopeId('005') from the console and it will return the DOM element on which the scope was created.

If the scope can not be found this way or this is not enough information for you to identify the scope you can do a stack trace on scope creation. This will require you to be using the unminified source. One example of when this might be necessary is if a service is creating a scope using something like $rootScope.new(true); to create a scope.

Put a breakpoint or console.trace() on the Scope.$new function just before it returns. In the most recent stable version as of this writing AngularJS v1.2.2 that's line 11119. For the older stable branch AngularJS v1.0.8 line 7903. If your scope id is consistent you can make it a conditional breakpoint or wrap the trace in an if statement. If you cannot predict the scope id or you just want to see all the scopes you will want to note the value of child.$id with a watch if you're using a breakpoint or a message if using console.trace() like so console.trace('new scope created: ' + child.$id) By examining the stack trace using either of these methods you should be able to determine where that scope is created.

Upvotes: 2

Related Questions