Shulou(Shulou.com)06/02 Report--

In this issue, Xiaobian will bring you about how to debug AngularJS applications through terminals. The article is rich in content and analyzes and narrates from a professional perspective. After reading this article, I hope you can gain something.

When we build AngularJS apps, it's always difficult to access hidden data and services in apps through JavaScript consoles in browsers such as Chrome, Firefox, and IE. Here are some simple tips to help us view and control running Angular apps via the Javascript console, making it easier to test, modify, and even modify our Angular apps in real time:

1: Access Scope

Access any scope (even isolated scopes!) in the page with a simple JS program:

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

For isolated scopes:

> angular.element(targetNode).isolateScope() -> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

Here we use `targetNode` as a reference to an HTML node. You can easily create a targetNode by using document.querySelector().

2: View scope tree

Sometimes we need to look at the scope hierarchy in the page to debug our application effectively. AngularJS Batarang is exactly what we need as an extension to Chrome that shows the current scope hierarchy and has other very useful features.

3: Grab any service

Regardless of where ngApp is defined, we can use the injector feature to grab references to any service (if we use angular's bootstrap method, we can grab $rootElement manually):

> angular.element('html').injector().get('MyService') -> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

We can then invoke the service just as we can inject the service.

4: Access Controller Usage Instructions

Some instructions define a controller with some additional (usually shared) functionality. To access a controller instance for a given instruction from the console, simply use the controller() method:

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

*** One practice is more advanced and less common.

5: Chrome Console Features

Chrome's console has a bunch of nice shortcuts to debugging browser apps. Here are some examples of Angular development practices:

$0-$4: Access the 5 DOM elements most recently selected in the viewing window. It is very convenient to select the range of grab.

$(selector) and $$(selector): A quick alternative to querySelector() and querySelectorAll, respectively

With a few simple tricks, we can access data in any scope of the page, view the scope hierarchy, inject services, and control directives.

So next time, if you want to tweak a little, check your own work or control AngularJS from the console, I hope you remember these commands and find them as useful as I do!

The above is how to debug AngularJS applications through the terminal shared by Xiaobian. If there are similar doubts, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.