inspect angularjs scope controller in chrome(webkit)

Pick an element in the HTML panel of the developer tools and type this in the console

angular.element($0).scope() 

In webkit $0 is a reference to the selected DOM node in the elements tab, so by doing this you get the selected DOM node scope printed out in the console

Also you could assign this to a var for future reference like
var scope = angular.element($0).scope();

Then you could do, scope.yourModelName to check values.

$0-$4 stand for the 5 DOM nodes that you recently selected. $5 will be undefined.

Addons/Extensions

There are some very useful Chrome Extensions that you might want to checkout:

  • Batarang. This has been around for a while.
  • ng-inspector. This is the newest one, and as the name suggests, it allows you to inspect your application’s scopes.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s