Go: Debug Angularjs apps in the console

Debugging Angularjs apps in the console

One tricky issue when creating angularjs apps is how to access the data and services that are hidden in the app in Chrome,firefox, as well as in the JavaScript console of IE. This article will show you some tips on how to monitor and control ANGULARJS applications from the JavaScript console to help you make it easier to test changes to ANGULARJS in real time.

1: Access Scope

We can use a single line of JS code to access any scope (even a standalone scope):

> Angularelement (TargetNode . Scope (-> childscope {$id :  "005" : Childscope: Object, $ $listenerCount : Scope ...              /span>         

For a separate scope:

> Angularelement (TargetNode . Isolatescope (-< Span class= "token operator" >> Scope {$id   "009" : Childscope: Childscope: Childscope $$ Nextsibling: Scope ...              /span>          

In the above code, targetNode it refers to an HTML node. You can use document.querySelector() it to easily get this node.

2: Monitoring the scope tree

Sometimes we need to look at the scope in the actual page to better debug our application. AngularJS Batarang is a chrome extension that showcases real-time hierarchical scopes and has many very helpful features.

AngularJS Batarang is a good thing, but at the moment the project seems to be in a state of unmanned maintenance, so we have an alternative: Ng-inspector. Its features are similar to Batarang, but as far as I can feel, ng-inspector is more intuitive and it also has a version of Safari extension. Judging from the popularity of the Angularjs community, Ng-inspector notch above.

3: Get any service

We can use the function on the element that ngApp is located (if you start angularjs manually, you need to use the $rootscope element) injector to get a reference to any service.

> Angular.Element(' HTML ').Injector()get ( ' MyService ' -> Object {undofunctionfunction  Function: function: span class= "token keyword" >function ...              /span>          

We can invoke any method in the service as if we had injected it into the console.

4: Get the controller for any instruction

Some designations may define a controller to add some additional functionality (such as sharing data and methods). In order to get the controller for a given instruction from the console, you only need to use the controller() function:

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

This method is more advanced and there are not many opportunities to use it.

5:chrome Console Features

Chrome has a lot of great little features in the console. Several of the following are small features that are useful for ANGULARJS application development:

• $0- $4 : Used to access the last 5 DOM elements that were selected in the Monitor window. This is handy for getting the scope of a selected element:angular.element($0).scope()

• $(selector)and $$(selector) : Used to replace querySelector andquerySelectorAll

Summarize

Using these tips, we can easily get data from any scope in the page, monitor the hierarchy of scopes, inject services, and control directives.

If you encounter some problems in the future, you can use the method you learned in this article to debug your app directly in the JavaScript console. I hope this article will be of some help to you.

Go: Debug Angularjs apps in the console