This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Memory Leaks Solution" Lesson
>> 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: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: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.