Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Ayo Adesina 325 posts 777 karma points
    Sep 13, 2017 @ 13:55
    Ayo Adesina

    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?

  • Nicholas Westby 1691 posts 5572 karma points c-trib
    Sep 13, 2017 @ 18:19
    Nicholas Westby

    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:

    Google Console

    You can also navigate hierarchical scopes like this:

  • Ayo Adesina 325 posts 777 karma points
    Sep 19, 2017 @ 17:04
    Ayo Adesina

    chrome plug-in "Ng-Inspector" - seems to be the only one that fully actually worked with umbraco back office - Useful tool.

Please Sign in or register to post replies

Write your reply to: