how to use angular chrome debug tool to debug across iframe

Question

I have an iframe nested in my app that has an angular project in it.

How can I get access to the scope inside that?

Answer 1

The magic is in <iframe>.contentWindow

When going from the parent to the child iframe (which is what you do when debugging), you'll want get the child window object, and use its definition of angular.

var w = $('iframe')[0].contentWindow;
w.angular.element(<selector>).scope();

Note that this does work with chrome's development shortcuts, so you can do

w.angular.element(0ドル).scope()

to get the scope of the currently selected element.

EDIT:

You can also directly assign the parent window's angular object to the child's definition (though I wouldn't recommend it if the parent is using angular itself)

window.angular = w.angular

This makes the parent effectively transparent, so you can use angular as normal

angular.element(0ドル).scope()

and it has the advantage of fixing angular console tools like Batarang

Note: the iframe must be from the same origin in order for this to work. For instance, trying this in plunker won't work as the iframe is generated dynamically, and has a source of "about:blank".

• pravin: This gives me a error DOMException: Blocked a frame with origin "http://plnkr.co" from accessing a cross-origin frame on chrome. Any Idea?
• 00500005: @pravin the iframe contents must be from the same origin. Within the same project, this usually isn't an issue.

Answer 2

Select iframe from debug options and do something like below:

jQuery('#my_element_id').scope();

To do this with javascript, I have setup a plunker link: http://plnkr.co/edit/whVo7wanhmcUfC7Nem9J?p=preview

Below js method access the scope of a element and passes to the parent method:

var passScopeToParent = function() {
 var scope = angular.element(jQuery("#myListItem")).scope();
 parent.change(scope);
}

parent widnow method accesses scope and changes its expressions:

var change = function(scope) {
 scope.$apply(function() {
 scope.department = 'Superhero';
 });
}

You can tweak this link to access the scope an element within iframe from parent window and print it in the console window.

• user2167582: any way to do this with javascript direct?
• bp4D: jQuery('#my_element_id').scope(); Only if you select the frame.
• 00500005: Your plunker doesn't actually demonstrate passing scope through an iframe. The javascript that executes gets the scope from its direct parent element (which it can do without element.scope via directives). It also doesn't pass it back through the iframe.

Answer 3

Late to the party. What I do is put a button in the directive and attach it to a function that prints the scope.

<button ng-click="echoScope()">Echo Scope</button>
$scope.echoScope = function() { console.debug($scope); };