Angular Web Console Hacking (2/4) – Scopes

added by JavaScript Kicks
10/20/2014 12:23:16 PM

205 Views

In the first part, I described ways to load services in the developer console and how to manipulate the application interactively. But the changes did not trigger the UI rendering immediately because we made them outside the $digest() cycle. The simplest workaround was to click on elements that cause a scope reevaluation, but as promised I’ll show a better solution in this article. Furthermore, I’ll explain how to access and manipulate scopes interactively from the console.


4 comments

Drew Peterson
10/21/2014 2:50:46 PM
Nice work @tilmanpotthof, have you considered wrapping this series up into a chrome extension for Angular debugging (similar to ng-inspector) when it's completed?

Robert Greyling
10/21/2014 2:54:12 PM
Oh wow - that opens up some interesting questions around security and sniffing around in the data and state of any Angular app out there. Some developers are not that careful and maybe this kind of tool in the hands of security auditors would be a good way to ensure the wrong kinds of data aren't finding their way to the front end. Would be very interested to hear what @tilmanpotthof thinks of that?

Paul Wheeler
10/22/2014 12:45:13 AM
Very cool @tilmanpotthof, I've been using Angular for a while but have never tried to play with it from the console, great stuff!

Tilman Potthof
10/26/2014 8:09:30 PM
Thanks for the great feedback! I like the idea of a chrome extension by @drewpcodes and put it on my project idea list. Could be really helpful for debugging.