Mastering Chrome Developer Tools Challenge 4: Finding Memory Leaks

Transcript from the "Challenge 4: Finding Memory Leaks" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jon: So this will be the last challenge here, and basically, I've got like some documentation here on common memory leaks and some examples stuff like that. But I also have some memory leaking on this page, and so the goal here what we're gonna do is we're gonna use combination of tools.

[00:00:24] The first one is the timeline like we've all ready saw. So you can use the timeline and remember you're looking for that jigsaw pattern that's like the danger zone, and from there you can get a better idea of like what is leaking memory, is it nodes? Is it JavaScript?

[00:00:37] Is it all these different things. The other one that we're gonna take a look at is back over here in the profiles, and this is very similar to the JavaScript CPU profile that we did, except it's, they call it the Heap Snapshot. And so, what this does, if you take a Heap Snapshot, is it looks and grabs every single thing that you have in memory right now in your app, and you can just look at it.

[00:01:00] And so this has a very similar concept in profiling land, you have like self and total time. In memory land you have shallow and retained size, so shallow sizes like how big is the object if you have got an object has got two keys and two values that's its shallow size.

[00:01:18] But if one of those values is a reference to another object its retained size is it and everything it has references to. Does that make sense? It's a little bit of a tricky concept. But so it's like what's cool is like, removing something from memory not only gets you its shallow size but it connect you, it's retained size back in free memory because if it's the last reference to something you're freeing all that stuff up.

[00:01:44] So you can start seeing like if you wanted to see like what the biggest shallow size things are on my mastering chromed up tools. Looks like it's like these strings, and I think that's from Mike. That's a service worker demo, I don't know what we have time for, but the point being that you can run a profile Heap Snapshot.

[00:02:00] And then you can start sorting by like shallow size distance all those kind of things. While we're here I kind of wanted to mention a few other cool things. One thing that is very, very helpful is you can, with these Heap Snapshots, you can compare them to each other.

[00:02:15] This is great for like applications where you wanna see the difference in memory between two places in time. So if you have a app that's a to-do list, and it doesn't look like you have a memory leak just loading the page you've refreshed the timeline, there's no memory leak, but users are complaining that it gets really slow the more they interact on the to-do list.

[00:02:32] What you could do is you could capture this Heap Snapshot. And then you could add and remove a bunch of to-do list items, and then you go back to profiles then you take another Heap Snapshot. So now we've got two, these are gonna be probably fairly similar, but you know the point still, no, what is going on?

[00:02:50] What you can do is you can, instead of the summary of one, you can do a comparison. So you can take the second one and you can compare it to the first one and you get this like, you get a delta, you get what the difference is. So this is not gonna apply to our examples cuz I don't have a cool, fancy application.

[00:03:04] But, when you're working on your production app, especially if it's a single page app and users are complaining that it gets slow, do a Heap Snapshot on page load, mess with your app a whole bunch of times. Do a Heap Snapshot again and compare that delta because you shouldn't see that much of a difference basically, unless you're leaking memory in some way.

[00:03:22] Like if you're just adding a to-do list item you shouldn't see a very large difference between the two. And then the last thing, if I can, over here is they have these two tools that kind of help you do that. It's not as clean as the comparison, but it's basically like an allocation over time, it just keeps taking snapshots and kind of seeing where you're at.

[00:03:41] So you can like just click on this and get more of like a high level view as it's just doing its work. Give it a second you'll start seeing some blue lines. Well, maybe not. Anyway, if you were on a bigger app that was doing more stuff you would start seeing basically, let me drag this up.

[00:04:04]
>> Jon: You're basically start seeing, as things are getting allocated, they're really subtle on here. Can you see this gray line here? I think in Chrome Stable it's blue, in Chrome Canary it looks to be gray. But basically every time it takes a heap allocation, it'll give you a line.

[00:04:19] And similar to the jigsaw thing, what you wanna look for is if that line's getting taller each time that it takes one of these things. Meaning more and more memory's being allocated. Sorry, if that's tough to see. And then you have back in profiles like a very last thing is like you can just see what memories being allocated from your scripts like this isn't gonna be documents stuff nodes anything like that.

[00:04:41] So you can just get like this final allocation that's just like, come on, I did my pages I'm doing enough. Check these all on the challenge page, cuz the challenge page is doing a bunch of stuff in memory. I think this page just has no nothing running on it, but yes, so the basic idea they have got some stuff here is like, yeah, so do a timeline recording that's always the first way to see if you have a problem at all.

[00:05:07] And then if you do have a problem connect a Heap Snapshot. This is like an interactive button compare those Snapshots kinda start figuring out what's going on with the code, if you can without looking at the actual JavaScript code. See if you can get it with just the tools.