Inspecting your application's watchers

The Batarang browser plugin allows you to inspect the application's watch tree, but there are many scenarios where dynamically inspecting the watch list within the console or application code can be more helpful when debugging or making design decisions.

How to do it…

The following function can be used to inspect all or part of the DOM for watchers. It accepts an optional DOM element as an argument.

var getWatchers = function (element) {
  // convert to a jqLite/jQuery element
  // angular.element is idempotent
  var el = angular.element(
      // defaults to the body element
      element || document.getElementsByTagName('body')
    )
    // extract the DOM element data
    , elData = el.data()
    // initalize returned watchers array
    , watchers = [];

  // AngularJS lists watches in 3 categories
  // each contains an independent watch list
  angular.forEach([
      // general inherited scope
      elData.$scope,
      // isolate scope attached to...