Name: New in Angular 1.3 - Performance Boost with debugInfoEnabled
Uploaded: 2014-12-19T08:24:27-06:00
Description: By default, Angular provides a lot of debug information on the DOM that's only necessary for tools like Protractor and Batarang. Angular 1.3 allows you to turn off the debug information to give your app a simple performance boost.

By default, Angular provides a lot of debug information on the DOM that's only necessary for tools like Protractor and Batarang. Angular 1.3 allows you to turn off the debug information to give your app a simple performance boost.

https://app.egghead.io/api/v1/lessons/angularjs-new-in-angular-1-3-performance-boost-with-debuginfoenabled/subtitles

New in Angular 1.3 - Performance Boost with debugInfoEnabled

[00:02] In Chrome DevTools, when you select an angular element and you go into the console, and say, $0you can get the regular DOM element. If you say angular element $0you can get that as an angular element.

[00:17] Doing that and saying scope will actually give you the scope and allow you to play with the scope bindings and things like that. Then you can actually say .data as well, and actually see the bindings that are listed on that element.

[00:32] All this stuff is really useful for debugging, but if you turn it off you can get a significant performance improvement. To turn it off, you simply say, compile provider, inject that guy in. and then with the compile provider, you say, debug info enabled and pass in faults.

[00:52] When I refresh here and I look at my elements now, you'll see this actually looks a lot different. When I delete this line and refresh, you can see all this, ng-scope, ng isolate scope, ng binding on there. Again, for debugging, for protractor or another tools to look that up.

[01:13] When I put that line back, and hit refresh you can see all of that stuff goes away. That also means that when I select this element and I go into the console and I try and do the same things like get the data, you see it has no bindings, and I get the scope, it doesn't let me do that. All that data that was there for debugging is no longer there, and that actually gives you a significant performance boost.

[01:41] If you want to turn the debug info back on temporarily, you can say angular reload with debug info. Hit enter, and you can see that. When I go to my elements tab, all of that ng-binding, ng-scope and stuff is back. When I go into the console and look at my element that's back as well.

New in Angular 1.3 - Performance Boost with debugInfoEnabled

Share this video with your friends