Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    New in Angular 1.3 - Performance Boost with debugInfoEnabled

    John LindquistJohn Lindquist

    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.

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss