When we're writing AngularJS apps, it's a very challenging task to get data and services hidden in the app through the Javascript consoles of Chrome, Firefox, and IE. Here are some simple tips to help us use the Javascript console to monitor and control a running Angular application, making it easier to test, modify, and even write Angular applications in real time.
1: Get Scopes (Scope)
We can use a single line of JS code to get any Scope (even isolated scopes):
> angular.element(targetNode).scope()-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}
Or get isolated scopes:
> angular.element (TargetNode) Isolatescope (), Scope {$id:" 009 ", $ $childTail: Childscope, $ $childHead: Childscope, $ $prevSibling: Childscope, $ $nextSibling: Scope ...}
This targetNode
refers to the HTML node (HTML nodes). You can easily use it document.querySelector()
to get it.
2: Monitor the scope tree (scope trees)
In order to better debug our application, there are times when we need to look at the scope (scope) of the architect on the page. This is where we need to use the AngularJS Baratang
ng-inspector
two Chrome extensions to help us see the scope in real time. Also, these two extensions have some other very useful features.
3: Crawl Services (Service)
We can use defined ngapp
element injector
function to crawl any service (service) or indirectly through any with ng-scope The elements of the
class to get Service (services).
> 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 the relevant Service as we did after injected (injected) in the program.
4: Get controller from directive
There are some directives (directives) that define certain (usually common) functions as a controller. In order to get a controller (director) example that specifies directive (Directive) from the console, we only need to use the controller()
function.
> angular.element(‘my-pages‘).controller()-> Constructor {}
The last one that is not commonly used but belongs to more advanced techniques.
5:chrome Console (console) features
Chrome has a lot of handy quick commands for debugging Web Apps in the console. Here are some of the most helpful commands for Angular development:
$0
- $4
: Gets the last 5 DOM elements in the Instpector window (monitor). This quick method can be very handy to help us crawl the scopes (scope) of the selected element:angular.element($0).scope()
$(selector)
and $$(selector)
: can be conveniently substituted querySelector()
and querySelectorAll
.
Thank @zgohr for this little trick!
Summarize
With these simple tips, we can obtain data from any scope (scope), monitor the scope (scope) hierarchy, inject services (services), and control directives (directives).
So next time, when you want to make some tweaks, check the code, or control a AngularJS app from the console, I want you to remember these tips and use them as much as I do.
Article Source: http://ionicframework.com/blog/angularjs-console/. Reprint please indicate the source.
Translate to self personal blog http://lyfeyaj.com/2015/01/07/debugging-angularjs-apps-from-the-console/
Debugging AngularJS applications in the console (Translate/change)