inspect angularjs scope controller in chrome(webkit)

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


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.


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.

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s