Debugging AngularJS Apps (Using Batarang & Chrome DevTools)

हम एक ऐसे chapter पर आए हैं जो हर AngularJS developer के लिए life-saving हो सकता है:

🐞Debugging AngularJS Apps (Using Batarang & Chrome DevTools)

(Code काम क्यों नहीं कर रहा? – इसका पता लगाने का सही तरीका!)

---

🎯 क्यों Debugging ज़रूरी है?

AngularJS में कई बार आप देखते हैं कि:

• Data bind नहीं हो रहा
• Event काम नहीं कर रहा
• कोई variable undefined है
• UI update नहीं हो रहा
• Digest cycle trigger नहीं हो रहा

इन समस्याओं को track, inspect और fix करना ही debugging कहलाता है।

---

🔧 Tool #1: Chrome DevTools (Default & Powerful)

✅ 1. $scope को Inspect करना

AngularJS में किसी DOM element का scope देखने के लिए:

1. Chrome DevTools खोलें (F12)
2. जिस element को inspect करना है, उसपर Right click → Inspect
3. Console में लिखें:

angular.element($0).scope()

$0 = currently selected element in DevTools
इससे उस element का scope object मिलेगा

✅ 2. $apply() / $digest() Testing

angular.element($0).scope().$apply(function() {
  angular.element($0).scope().name = "Updated Name";
});

✅ 3. Watcher Count चेक करना

function getWatchers(root) {
  root = root || angular.element(document).injector().get('$rootScope');
  var watchers = [];
  function collect(scope) {
    if (scope.$$watchers) {
      watchers = watchers.concat(scope.$$watchers);
    }
    if (scope.$$childHead) collect(scope.$$childHead);
    if (scope.$$nextSibling) collect(scope.$$nextSibling);
  }
  collect(root);
  return watchers.length;
}

getWatchers();

यह आपको बताएगा कि app में कितने total watchers हैं (performance debug के लिए)

---

🔧 Tool #2: AngularJS Batarang Extension (Deprecated but Useful)

📌 Batarang एक Chrome Extension है जिसे AngularJS team ने ही बनाया था।

✅ Features:

• 🔍 Scope viewer: कौन-से scope में क्या variable है
• 🔄 Model graph: watchers, models और उनका connection
• 🕵️ Performance tab: कौन-सा watcher सबसे slow है
• 📚 Dependency tree: कौन-सा service, directive किससे linked है

✅ कैसे Install करें?

Batarang अब Chrome Web Store से हट चुका है
लेकिन आप इसे GitHub से manually install कर सकते हैं (advanced users only):
https://github.com/angular/batarang

✅ Recommended: Modern apps में Chrome DevTools ही use करें

---

✅ Chrome Console में $scope, $rootScope Access Tips

Command	Result
angular.element($0).scope()	Element का scope object
angular.element($0).isolateScope()	Directive का isolate scope
angular.element(document.body).injector().get('$rootScope')	$rootScope access
angular.reloadWithDebugInfo()	Batarang के लिए debugging enable

---

✅ Common Debugging Situations

Problem	Debug Tip
Binding not updating	Check $apply()/$digest() trigger हुआ या नहीं
ng-model doesn’t reflect	Console से $scope variable check करें
Click not working	Console में ng-click के function का नाम सही check करें
Filters not applying	Wrong filter name? Invalid value?
Error: 10 digest iterations	Circular model update bug – use logs inside $watch

---

✅ Bonus: Use console.log() in AngularJS Controller

$scope.name = "Raj";
console.log("Name set to:", $scope.name);

✅ या use AngularJS $log service:

app.controller("MainCtrl", function($scope, $log) {
  $log.debug("Debugging started");
});

---

🧠 अभ्यास प्रश्न (Exercise)

1. किसी HTML element का AngularJS $scope DevTools में कैसे check करेंगे?
2. $scope.name को manually console से बदलकर DOM update कैसे करेंगे?
3. Digest cycle trigger क्यों जरूरी है debugging में?

---

✅ आपने क्या सीखा?

• AngularJS App को Chrome DevTools के ज़रिए कैसे inspect करें
• DOM elements से $scope और variables check करना
• Digest cycle issues और watcher performance debug करना
• AngularJS के लिए Batarang क्या करता था
• Console debugging के practical tips

---

🎯 अब आप किसी भी AngularJS bug को confidently trace और fix कर सकते हैं — और production-level quality ensure कर सकते हैं।