1

What is the recommended way to quickly inspect the values on my html section of my jsfiddle examples? Is there a more efficient practice than using the {{}} or filtering to json?

<div ng-app="myApp" ng-controller="MainCtrl">
<div 
     ng-init="index=0; classes=['red', 'yellow', 'green']" 
     ng-click="index = index + 1" 
     ng-class="classes[index % classes.length]">Click to change traffic color</div>
     Index = {{index}};
     Length = {{classes.length}}
     Style= {{classes[index % classes.length]}}

</div>

I just want something simple to look at tiny examples like this one: Another example

EDIT: This is a more advanced technique on how to build an implementation of AngularJS from the ground up. I cant think of a better way to really learn and understand Angular if you have the patience,time and know how.

scalaGirl
  • 335
  • 4
  • 17

1 Answers1

0

There's an official Chrome extension for inspecting AngularJS apps. It lets you view $scope variables, dependency graphs, performance, and more.

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

Justin Ryder
  • 757
  • 9
  • 17
  • I thought of using Chrome's Browser Debugger with Batarang but according to recent reviews it is now broken. Please click on reviews to confirm. – scalaGirl Nov 07 '13 at 22:14
  • I tried following the (outdated) instructions on the link below so after Ctrl +shift+I, I selected Sources &clicked on Ctrl O & selected my fiddle but got a blank page :-(http://stackoverflow.com/questions/5655058/inspecting-javascript-on-jsfiddle-net-in-google-chrome – scalaGirl Nov 07 '13 at 22:36
  • I've been using Batarang almost every day at work and it works fine for me. I'm on Chrome "Version 32.0.1700.6 dev-m Aura" – Justin Ryder Nov 08 '13 at 19:01