Debug AngularJS applications in the console)

Source: Internet
Author: User

Debug AngularJS applications in the console)

When writing AngularJS applications, we can use the Chrome, Firefox, and IE Javascript consoles to obtain Data and services hidden in the applications) it is a very challenging task. The following are some simple tips to help us monitor and control a running Angular application on the Javascript console, making it easier to test, modify, or even write Angular applications in real time.

1: Get Scopes (Scope)

We can use a line of JS Code to obtain any Scope (or even isolated scopes ):

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

Or obtain isolated scopes:

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

HeretargetNodeIt refers to HTML Node ). You can easily usedocument.querySelector().

2: Scope Tree)

In order to better debug our applications, sometimes we need to check what the Scope constructor on the page is like. In this case, we need to useAngularJS BaratangAndng-inspectorThese two Chrome browser extensions help us view the Scope in real time. In addition, these two extensions have some other very useful functions.

  • AngularJS Baratang

     

    Ng-inspector

    3: capture Services)

    We can use the definedngAppElementinjectorFunction to capture any Service or indirectly through anyng-scopeClass element to obtain the Service (Service ).

    > 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 related services as we have used injected (injection) in the program.

    4: Get controller from directive

    Some directives define certain (usually shared) functions as a controller. To obtain a controller example of a specified directive (command) from the console, we only need to usecontroller()Function.

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

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

    5: Chrome Console features

    Chrome has many convenient commands used to debug Web applications on the console. The following are some of the most helpful commands for Angular development:

    • $0-$4: Obtain the last five DOM elements in the instpector window (MONITOR. This quick method can help us easily capture the scopes of Selected elements (scope ):angular.element($0).scope()

    • $(selector)And$$(selector): Can be easily replacedquerySelector()AndquerySelectorAll.

      Thanks to @ zgohr for providing this tip!

      Summary

      With these simple tips, we can obtain data in any scope, monitor the scope level, inject services (services), and control direves VES (commands ).

      So next time, when you want to fine-tune, check the code, or control an AngularJS application from the console, I hope you will remember these tips and use them more like me.

       

       

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.