I think I had mixed results with Batarang many months ago last I tried it (I think it had some issue with how Umbraco is dynamically bootstrapping AngularJS... or something like that).
I did figure out a nifty trick though. If you inspect an element using Chrome developer tools, then you go to the Chrome console, you can type "$0" to refer to the selected element. You can then do this to get access to the AngularJS scope for that element:
angular.element($0).scope();
You can then tinker with that variable, looking at parent scopes, model values, and so on. Really useful for troubleshooting. Here's a screenshot that shows the sorts of info you can get at:
You can also navigate hierarchical scopes like this:
Using Augury or AngularJS Batarang to debug Umbraco Back office
Hi guys,
In recent days I have had lots of issues building a custom section in Umbraco...
I have been looking at tools that can attach to chrome to debug anugular apps, I have tried both
Using Augury and AngularJS Batarang
both don't seem to work.
Are there any tools like this that might?
I think I had mixed results with Batarang many months ago last I tried it (I think it had some issue with how Umbraco is dynamically bootstrapping AngularJS... or something like that).
I did figure out a nifty trick though. If you inspect an element using Chrome developer tools, then you go to the Chrome console, you can type "$0" to refer to the selected element. You can then do this to get access to the AngularJS scope for that element:
You can then tinker with that variable, looking at parent scopes, model values, and so on. Really useful for troubleshooting. Here's a screenshot that shows the sorts of info you can get at:
You can also navigate hierarchical scopes like this:
chrome plug-in "Ng-Inspector" - seems to be the only one that fully actually worked with umbraco back office - Useful tool.
is working on a reply...