Debugging AngularJS applications in the console (Translate/change)

When we're writing AngularJS apps, it's a very challenging task to get data and services hidden in the app through the Javascript consoles of Chrome, Firefox, and IE. Here are some simple tips to help us use the Javascript console to monitor and control a running Angular application, making it easier to test, modify, and even write Angular applications in real time.

1: Get Scopes (Scope)

We can use a single line of JS code to get any Scope (even isolated scopes):

> angular.element(targetNode).scope()-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

Or get isolated scopes:

> angular.element (TargetNode) Isolatescope (), Scope {$id:" 009 ", $ $childTail: Childscope, $ $childHead: Childscope, $ $prevSibling: Childscope, $ $nextSibling: Scope ...}  

This targetNode refers to the HTML node (HTML nodes). You can easily use it document.querySelector() to get it.

2: Monitor the scope tree (scope trees)

In order to better debug our application, there are times when we need to look at the scope (scope) of the architect on the page. This is where we need to use the AngularJS Baratang ng-inspector two Chrome extensions to help us see the scope in real time. Also, these two extensions have some other very useful features.

• AngularJS Baratang

• Ng-inspector

3: Crawl Services (Service)

We can use defined  ngapp   element  injector   function to crawl any service (service) or indirectly through any with  ng-scope The elements of the  class to get Service (services).

> angular.element(document.querySelector(‘html‘)).injector().get(‘MyService‘)-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}// Or slightly more generic> angular.element(document.querySelector(‘.ng-scope‘)).injector().get(‘MyService‘)

Next we can use the relevant Service as we did after injected (injected) in the program.

4: Get controller from directive

There are some directives (directives) that define certain (usually common) functions as a controller. In order to get a controller (director) example that specifies directive (Directive) from the console, we only need to use the controller() function.

> angular.element(‘my-pages‘).controller()-> Constructor {}

The last one that is not commonly used but belongs to more advanced techniques.

5:chrome Console (console) features

Chrome has a lot of handy quick commands for debugging Web Apps in the console. Here are some of the most helpful commands for Angular development:

• $0- $4 : Gets the last 5 DOM elements in the Instpector window (monitor). This quick method can be very handy to help us crawl the scopes (scope) of the selected element:angular.element($0).scope()

• $(selector)and $$(selector) : can be conveniently substituted querySelector() and querySelectorAll .

Thank @zgohr for this little trick!

Summarize

With these simple tips, we can obtain data from any scope (scope), monitor the scope (scope) hierarchy, inject services (services), and control directives (directives).

So next time, when you want to make some tweaks, check the code, or control a AngularJS app from the console, I want you to remember these tips and use them as much as I do.

Article Source: http://ionicframework.com/blog/angularjs-console/. Reprint please indicate the source.

Translate to self personal blog http://lyfeyaj.com/2015/01/07/debugging-angularjs-apps-from-the-console/

Debugging AngularJS applications in the console (Translate/change)