How to debug ANGULARJS application using Chrome browser

This article mainly introduces the use of Chrome browser debugging Angularjs Application method, Angularjs is a very popular JavaScript library, need friends can refer to the

When we build ANGULARJS applications, it is always difficult to access the data and services hidden in the application through the JavaScript console of browsers such as Chrome,firefox and IE. Here are some simple tips to help us view or control a running angular application through the JavaScript console, making it easier to test, modify, and even modify our angular applications in real time:

1: Accessing scopes

Access to any scope in the page (or even the scope of isolation) through a single line of JS programs! ：

> angular.element(targetNode).scope()

-> ChildScope {$id:"005",this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

For quarantine scopes:

> angular.element(targetNode).isolateScope()

-> Scope {$id:"009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

This uses ' TargetNode ' as a reference to the HTML node. You can easily create a ' targetnode ' by ' document.queryselector '

2: View the scope tree

Sometimes we need to look at the scope level in the page to effectively debug our application. Angularjs Batarang is just one of the extensions we need for a Chrome browser that can showcase the current scope level and have other very useful features.

3: Grab any service

Regardless of where ngapp is defined, we can use the INJECTOR function to crawl any reference to the service (if you use the angular bootstrap method, you can manually crawl $rootelement):

> angular.element('html').injector().get('MyService')

-> Object {undo:function, redo:function, _pushAction:function, newDocument:function, init:function…}

Then we can call the service, just as we can inject the service.

4: Access Controller usage Instructions

Some directives define a controller that has some additional (usually shared) functionality. To access a controller instance of a given instruction from the console, simply use the controller () method:

> angular.element('my-pages').controller()

-> Constructor {}

The last approach is more advanced and less common.

5:chrome Console Features

The Chrome browser's console has a good shortcut for debugging browser applications. This is some of the best practices in angular development:

$0-$4: Accesses the 5 DOM elements that were recently selected in the viewing window. It is convenient to select a range of crawls.

$ (selector) and $$ (selector): A quick alternative to queryselector () and Queryselectorall

Thank @zgohr for providing this method!

Conclusion

With a few simple tips, we can access data in any scope of the page, view the scope hierarchy, and inject service and control instructions.

So the next time, if you want to adjust a little, check your work or control angularjs through the console, I hope you can remember these commands and be able to do as well as I think they are very practical!