This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Memory Leaks Solution" Lesson
[00:00:00]
>> Jon Kuperman: All right, for this one we have kinda two options here for how to figure out if there's a memory leak on a page. We can use the Task Manager that I showed earlier, or we can use the performance panel and the memory section of it. They're really both just as good as each other.
[00:00:13] I'm gonna use the Task Manager, I think I find it a little bit easier to read. So I'm gonna ahead and open up this Task Manager here. And make sure you have the JavaScript memory turned on, and so we can kinda see over here as JavaScript memory goes, you wanna top down, so we're seeing which tabs have the most JavaScript memory.
[00:00:31] So yeah, so we're kind of gonna go to the first one here, and go back over here and see how the JavaScript memory is doing. Looks like we're at 12,000 and it's staying pretty stable. So then we'll go to the second page and pack over the JavaScript memory, and it goes up to 14, but then it just stables back out and stays still.
[00:00:51] So I'm gonna go to the third one here, and looks like this one goes up to 12,000, and now 15,017. So it's long and we stay here, so this is a really good candidate, it's just shot to the top here. So this one definitely has a memory leak.
[00:01:05] If we wanted to just check to be thorough, this fourth one, we can go through this one as well, and just see that it is staying really stable. So this one looks like it loads about 18,000, and then just stays. So given that, it's the third one, we'll go back through here.
[00:01:24] We can open up the DevTools. If we wanted to, we can do a performance thing, see that there's a memory leak, but since we're pretty confident at this point, I'll just take a heap snapshot. So I go ahead and record that. And as this finishes up, we just kinda wanna see what has the biggest shallow size.
[00:01:40] So again, the biggest shallow size we see that we're getting all these strings, these strings are getting populated from somewhere, so you can kinda drill down into it. You can click on one of them, you can see that they are coming from here, inside an array, inside the window object, inside the document.
[00:01:55] And anyway, you can see they're coming from inside this init function. So if we were to go back over into our code base and take a look at the file here, we can see that we have this init function, it's calling grow, just pushing a bunch of stuff in there.
[00:02:09] Again, the thing that's a little bit unfortunate about the memory leak process is that don't get that same one-to-one mapping that you get in the profile, so you can't say like, where is this string coming from? What line of code is it? Cuz it's not really looking at it that way.
[00:02:22] It's really looking at it over time, how much memory is being used and what's going in it. It doesn't keep references to what triggered it or what caused it. Whereas the JavaScript CPU, there's a one-to-one relationship, right? It's your code that's triggering stuff, so it's pretty easy to go back and forth.
[00:02:38] But you can get a lot of context clues here, like what type it is, what it's being stuck inside of, like an array, things like that. And you can kinda use that to try to identify where it's coming from. If you do ever see that DOM nodes are the problem, those ones are a little bit easier.
[00:02:51] You can click on any DOM node in this list here, and then you can do that dollar sign zero trick that we learned back from over here. And it'll bring the DOM node that you've clicked on into the memory, into the console. But if you're dealing with primitives, like strings, or arrays, or something like that, you're gonna have to just take the hints, and then start looking through your code and see what might be causing them.