Angularjs How to debug incorrectly in the console _angularjs

When we're writing angularjs apps, it's a challenging task to get the data and services that are hidden in applications through the JavaScript console 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 to make it easier to test, modify, and even write angular applications in real time.

1: Get scopes (scope)

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

Copy Code code as follows:

> angular.element (TargetNode). Scope ()
-> Childscope {$id: "005", This:childscope, $ $listeners: Object, $ $listenerCount: Object, $parent: Scope ...}

Or get isolated scopes:

Copy Code code as follows:

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

The TargetNode in this refers to HTML node (HTML nodes). You can easily use Document.queryselector () to get it.

2: Monitoring the scope tree (scope trees)

In order to better debug our applications, there are times when we need to look at the scope (scope) of the architects on the page. That's when we need to use ANGULARJS.
Baratang and Ng-inspector These two Chrome browser extensions to help us see scope (scope) in real time. Also, these two extensions have some other very useful features.

(1). Angularjs Baratang

(2). Ng-inspector

3: Crawl Services (Service)

We can use the INJECTOR function, which defines the Ngapp element, to crawl any service (service) or indirectly through any element with Ng-scope class to obtain the service.

Copy Code code as follows:

> 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 ')

Then we can use the relevant service as we did after injected (injected) in the program.

4: Get controller from directive

There are some directives (instructions) that define certain (usually shared) functions as a single controller. To get a controller (Controller) example of a specified directive (Directive) from the console, we only need to use the controller () function.

Copy Code code as follows:

> angular.element (' my-pages '). Controller ()
-> Constructor {}

The last one is not commonly used but is a more advanced technique.

5:chrome Console (console) features

Chrome has a lot of handy shortcut commands for debugging Web applications in console (console). Here are some of the most helpful commands for angular development:

$ $: Gets the last 5 DOM elements in the Instpector window (monitor). This quick approach can be very handy to help us crawl the scopes (scope) of the selected element: Angular.element ($). Scope ()

$ (selector) and $$ (selector): can be conveniently substituted for queryselector () and Queryselectorall.

Thank @zgohr for this little trick!

Summarize

With these simple tips, we can get data from any scope (scope), monitor the level of scope (scope), inject services, and control directives (instructions).

So the next time you want to do some fine-tuning, check the code, or control a ANGULARJS application from the console, I want you to remember these tips and use them as much as I do.

See more ANGULARJS syntax, you can pay attention to: Angularjs reference Manual in English, also hope that we support the cloud habitat community.