New in Angular 1.3 - Performance Boost with debugInfoEnabled

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 5 years ago

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.

[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.

Jeremy
Jeremy
~ 8 years ago

Ok so I guess you are trying to tell us to use this tool in production to improve performance of the application ?

Markdown supported.
Become a member to join the discussionEnroll Today