Show
Hunting memory leaks in JavaScript using Chrome DevToolsHave you ever left a web app opened in a tab for a couple of hours to come back and see this screen? In this post we will learn how to use the Chrome DevTools to find memory leaks. Memory managementJavaScript is a garbage collected language, but we should still learn about memory management, as making memory leaks in your code is quite easy. In short the garbage collector tracks memory allocation and when a piece of allocated memory is not needed any longer, it frees it. Unreachable pieces of memory are considered garbage, but for the rest only the developer can decide whether it’s needed or not. So, the main causes of memory leaks in JavaScript are unwanted references like accidental global variables, forgotten intervals, detached DOM elements and others. Visualize using TimelineCan you spot a problem with the following code snippet?
Don’t worry if you can’t figure it out, the issue is not so obvious. To diagnose if an application has a memory leak, you can use the Performance section in Chrome DevTools. In the above example we want to check if continuous usage of the application (adding/removing tasks) causes unexpected increase of memory usage. To test this we can record the memory usage while adding and removing a task several times. We expect that when we add a task the memory usage increases and when we remove it – the memory usage drops back to the previous level.
As seen on the screenshot above the nodes and listeners progressively increase and never drop while the
expected outcome is a graph similar to the JS Heap line above. Discover detached DOM using Heap SnapshotsWhen it comes to finding where the problem originates the Memory section in Chrome DevTools comes in handy. With a couple of
snapshots we can find which parts of the application use more memory than expected and whether we have any detached DOM elements:
Turns out our Task’s destroy method has a bug – we call the DOM removemethod, but we still keep a reference to the DOM element, so it’s never collected. When we get that fixed and perform the same test in the Performance tab, we’ll see the pattern we want:
Conclusion:Memory leaks are common in JavaScript. Some of them may cause serious performance issues, so it’s a good idea to get familiar with memory management and start profiling at an early stage, especially when working on big applications. In this article we’ve only scratched the surface, but it’s still a good start. ResourcesHere you can get the fully working examples:
Home » Hunting memory leaks in JavaScript using Chrome DevTools How check memory usage in JavaScript?Here's one way we could sample memory usage and feed it into a monitoring tool (like TrackJS). This example uses requestAnimationFrame to periodically check the memory usage and record an error if it has crossed either an absolute or relative threshold.
What is JavaScript memory in Chrome?The JavaScript Memory column represents the JS heap. This column contains two values. The value you're interested in is the live number (the number in parentheses). The live number represents how much memory the reachable objects on your page are using.
How do I view JavaScript in Chrome?Activate JavaScript in Google Chrome. Open Chrome on your computer.. Click. Settings.. Click Security and Privacy.. Click Site settings.. Click JavaScript.. Select Sites can use Javascript.. How do you check if there is a memory leak in JavaScript?Press F12 to open the developer tools and go to the Memory Tab.. Pick a feature or a part of your app that you want to inspect for leaks. ... . Do the action (for example opening a dialog) you want to check for memory leaks once, so potential global services can be loaded. ... . Now select Record Allocation Timeline and press Start.. |