AngularJS Performance: debugInfoEnabled

The purpose of this fiddle is to show you how to turn off debug features in AngularJS 1.3.8 by leveraging the debugInfoEnabled function. NOTE: by default the debug info is turned off. Click the enable button to see what it looks like with debug info turned on. Take note that you now see stuff like class="ng-scope" attached to the elements. This information is necessary for AngularJS to provide debug info to tools like Protractor and developers as well.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//fiddlercdn.s3.amazonaws.com/beautify-html.js"></script>
<!--
The purpose of this fiddle is to show you how to turn off debug features in AngularJS 1.3.8 by leveraging the debugInfoEnabled function.

NOTE: by default the debug info is turned off. Click the enable button to see what it looks like with debug info turned on. Take note that you now see stuff like class="ng-scope" attached to the elements. This information is necessary for AngularJS to provide debug info to tools like Protractor and developers as well.
--->
<div ng-app="app">
    <div ng-controller="ctrl">
        <div>{{message}}</div>
        <pre>{{html}}</pre>
        <button ng-click="reloadWithDebugInfo();">Enable</button>
    </div>
</div>

CSS

body { margin: 1em; }
div, button { margin: 0.5em; }

JavaScript

var app = angular.module('app', []);

app.config(function($compileProvider) {
    $compileProvider.debugInfoEnabled(false);
});

app.controller('ctrl', function($scope, $window) {
    $scope.message = 'Hello, world!';
    
    var html = $('div[ng-app]').html();
    $scope.html = $window.html_beautify(html);

    $scope.reloadWithDebugInfo = function() {
        angular.reloadWithDebugInfo();
    }
});