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 303 posts 692 karma points
    1 week ago
    Ayo Adesina
    0

    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 1624 posts 5298 karma points c-trib
    1 week ago
    Nicholas Westby
    1

    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:

    Google Console

    You can also navigate hierarchical scopes like this:

    angular.element($0).scope().$parent;
    
  • Ayo Adesina 303 posts 692 karma points
    1 day ago
    Ayo Adesina
    100

    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:

Draft