Debug AngularJS applications in the console)

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.