Angular 1.2 enables debugInfoEnabled feature

Question

Angular 1.2 enables debugInfoEnabled feature

With the release of Angular 1.3, a new method called debugInfoEnabled() was introduced which can significantly improve performance when set to false in the application config function:

myApp.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.debugInfoEnabled(false);
}]);

Unfortunately, Angular 1.3 discontinued support for IE8. This presents an issue for applications like mine that must run on IE8. As a result, I have had to stick with version 1.2.

If you're facing the same dilemma and need to replicate the functionality of debugInfoEnabled() in Angular 1.2, here are some aspects you can focus on:

Avoid creating ng-scope/ng-isolated-scope CSS classes while generating new scopes
Omit attaching binding data and ng-class CSS class to elements using ngBind, ngBindHtml or {{...}} interpolations

^{One potential solution could involve forking the angularjs repository and backporting the desired feature to version 1.2. This would require maintaining updates from the original source.}

If you have any insights or suggestions, they would be much appreciated.

javascript angularjs debugging internet-explorer-8 backport

Answer 1

Answer №1

In order to prevent the default behavior, utilize the underlying DOM setAttribute method. The plunker in the previous response has been modified:

http://plnkr.co/edit/cMar0d9IbalFxDA6AU3e?p=preview

To achieve the following actions:

Duplicate the DOM setAttribute prototype method
Rewrite it with a validation for ng debug attributes
Provide a false return for ng debug attributes
Return normally otherwise

Implement by doing the following:

/* Clone the original */
Element.prototype.ngSetAttribute = Element.prototype.setAttribute;

/* Overwrite the API */
Element.prototype.setAttribute = function(attr, val) {
/* Define ng debug attributes */ 
var ngAttributes = {"ng-binding": true, "ng-scope":true,"ng-class":true,"ng-isolated-scope":true};

console.log([attr,val]);

/* Block ng debug attributes; call the clone otherwise */
if (ngAttributes[attr]) 
  return false; 
else if (JSON.stringify(ngAttributes).match(attr) )
  return false;
else
  return this.ngSetAttribute(attr, val);
}

For IE8 compatibility, substitute Element for HTMLElement.

Additional Resources

CSS classes utilized by angular
Prototypes, Constructor Functions, and Taxidermy
AngularJS IE8 Shim
AngularJS IE8 Builds
Document Object Model Prototypes
Document Object Model Prototypes, Part 2: Accessor (getter/setter) Support
What's New in Internet Explorer 9

Answer 2

In order to prevent the default behavior, utilize the underlying DOM setAttribute method. The plunker in the previous response has been modified:

http://plnkr.co/edit/cMar0d9IbalFxDA6AU3e?p=preview

To achieve the following actions:

Duplicate the DOM setAttribute prototype method
Rewrite it with a validation for ng debug attributes
Provide a false return for ng debug attributes
Return normally otherwise

Implement by doing the following:

/* Clone the original */
Element.prototype.ngSetAttribute = Element.prototype.setAttribute;

/* Overwrite the API */
Element.prototype.setAttribute = function(attr, val) {
/* Define ng debug attributes */ 
var ngAttributes = {"ng-binding": true, "ng-scope":true,"ng-class":true,"ng-isolated-scope":true};

console.log([attr,val]);

/* Block ng debug attributes; call the clone otherwise */
if (ngAttributes[attr]) 
  return false; 
else if (JSON.stringify(ngAttributes).match(attr) )
  return false;
else
  return this.ngSetAttribute(attr, val);
}

For IE8 compatibility, substitute Element for HTMLElement.

Additional Resources

CSS classes utilized by angular
Prototypes, Constructor Functions, and Taxidermy
AngularJS IE8 Shim
AngularJS IE8 Builds
Document Object Model Prototypes
Document Object Model Prototypes, Part 2: Accessor (getter/setter) Support
What's New in Internet Explorer 9

Answer 3

Answer №2

If you want to turn off logging, you can use the code $logProvider.debugEnabled(true); in your angular configuration settings. To see the effects of the debugEnabled setting, make sure you are using the $log provider when logging.

Example Code:

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

app.config(function($logProvider){
  $logProvider.debugEnabled(false);
});

app.controller('MainCtrl', function($scope, $log ) {
  $scope.name = 'Hello World!';
  $scope.testModel = {name: "test"};
  //console.log('This will show log even if debugging is disable');
  $log.debug('TEST Log');
});

Here is a Fiddle for reference.

I hope this explanation helps you with your question.

Answer 4

If you want to turn off logging, you can use the code $logProvider.debugEnabled(true); in your angular configuration settings. To see the effects of the debugEnabled setting, make sure you are using the $log provider when logging.

Example Code:

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

app.config(function($logProvider){
  $logProvider.debugEnabled(false);
});

app.controller('MainCtrl', function($scope, $log ) {
  $scope.name = 'Hello World!';
  $scope.testModel = {name: "test"};
  //console.log('This will show log even if debugging is disable');
  $log.debug('TEST Log');
});

Here is a Fiddle for reference.

I hope this explanation helps you with your question.

Angular 1.2 enables debugInfoEnabled feature

Answer №1

Answer №2

Similar questions

When attempting to click on my subtopics using jQuery, they do not appear as expected

What sets apart the <script> tag with a type attribute from the standard <script> tag in HTML?

What could be the reason why my sorting function is not functioning properly?

Leveraging jsPDF and html2canvas in conjunction with ES6

Having difficulty retrieving objects within a foreach loop of object keys that do not meet the criteria of the string.prototype.replace method

Issue with filtering tasks in a Task Tracker application

Utilizing an object's attribute to reference an image for a source

Angular's $http service fetches data successfully, however, it fails to update the scope with the

What's the best way to update the value of a TextInput field?

How to invoke a function from a different ng-app in AngularJS

Dynamically loading Ember templates with asynchronous requests

Even though I have successfully stored a key value pair in LocalStorage using JSON stringify and setItem, the data does not persist after the page is refreshed

Problem encountered after eliminating hash signs from routing in Angular-UI-Router

The onChange functionality of the Formik Field API is not compatible with a child component

Is there a way to generate buttons for values that are stored within an array, which is nested inside another array?

Leveraging callback functions for dynamically updating a JSON structure

Introducing a content height offset to create a smooth slide-up animation on hover

Updating the default value in Angular select directive

Activate the "order evaluation" trigger on the checkout page in Woocommerce

Use JavaScript to illuminate individual words on a webpage in sequence