Sign in Register
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 445 posts 1059 karma points
    Sep 13, 2017 @ 13:55
    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?

    Copy Link
  • Nicholas Westby 2054 posts 7104 karma points c-trib
    Sep 13, 2017 @ 18:19
    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;
    Copy Link
  • Ayo Adesina 445 posts 1059 karma points
    Sep 19, 2017 @ 17:04
    Ayo Adesina
    100

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

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies