How to find if Umbraco 7 Debugging is Enabled in AngularJS or Javascript in the Backoffice

When creating a new functionality in the Umbraco 7 backoffice such as a property editor or custom section, it is sometimes necessary to print out some debugging information to verify that the models are what you expect.

Rather than commenting out your {{myModel | json}} AngularJS bindings, why not simply only show them if Umbraco has debugging turned on?

Turns out, this is very easy as Umbraco already has a global ServerVariables collection that you can check:

Umbraco.Sys.ServerVariables.isDebuggingEnabled

If you want to show/hide information based on that in AngularJS, simply assign it to a property on the $scope of your controller:

$scope.showDebug = Umbraco.Sys.ServerVariables.isDebuggingEnabled;

Then check for it in your view:

<div data-ng-show="showDebug">{{myModel | json}}</div>

That's it!