{"id":234,"date":"2014-06-29T08:00:00","date_gmt":"2014-06-29T08:00:00","guid":{"rendered":"http:\/\/localhost\/?p=234"},"modified":"2015-04-02T13:23:20","modified_gmt":"2015-04-02T13:23:20","slug":"angularjs-console","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/angularjs-console","title":{"rendered":"Debugging AngularJS Apps from the Console"},"content":{"rendered":"

When building AngularJS apps, it can be challenging to access data and services hidden deep in our application through the Javascript console in Chrome, Firefox, and IE. Here are some simple tricks we can use to inspect and control a running Angular app through the browser Javascript console, making it easy to test, modify, and even program our Angular app in real-time:<\/p>\n

<\/p>\n

1: Access Scopes<\/h3>\n

We can access any scope (even isolated ones!) on the page with a simple JS one-liner:<\/p>\n

> angular.element(targetNode).scope()\n-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope\u2026}\n<\/code><\/pre>\n
Or for isolated scopes:<\/p>\n
> angular.element(targetNode).isolateScope()\n-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope\u2026}\n<\/code><\/pre>\n
Where targetNode<\/code> is a reference to an HTML Node. You can grab one easily using document.querySelector()<\/code>.<\/p>\n
2: Inspect the Scope Tree<\/h3>\n
Sometimes we need to see what the scopes look like on the page to effectively debug our app. The AngularJS Batarang<\/a> is a Chrome extension that shows the live scope hierarchy and has some other really helpful features.<\/p>\n
\"Batarang
3: Grab any Services<\/h3>\n
We can grab a reference to any service using the injector<\/code> function of element where ngApp<\/code> was defined, or indirectly though any element with the ng-scope<\/code> class:<\/p>\n
> angular.element(document.querySelector('html')).injector().get('MyService')\n-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function\u2026}\n\/\/ Or slightly more generic\n> angular.element(document.querySelector('.ng-scope')).injector().get('MyService')\n<\/code><\/pre>\n
We can then call methods on that service just like we could if we injected it.<\/p>\n
4: Access controller for directive<\/h3>\n
Some directives define a controller with certain additional (often shared) functionality. To access the instance of a controller for a given directive from the console, just use the controller()<\/code> function:<\/p>\n
> angular.element('my-pages').controller()\n-> Constructor {}\n<\/code><\/pre>\n
This last one is more advanced and not used as frequently.<\/p>\n
5: Chrome Console Features<\/h3>\n
Chrome has a ton of nice shortcuts<\/a> for debugging browser applications from the console. Here are some of the best ones for Angular development:<\/p>\n