Checking for Memory Leaks in Chrome

Here is a quick procedure for checking for memory leaks (or DOM leaks) in Chrome.

  • load the app/page in question
  • open the developer tools (ctrl-shift-j)
  • switch to the “Timeline” pane
  • start the memory timeline (click the little grey circle)
  • trigger garbage collection (click the trash can icon)
  • clear the timeline (click the slashed-circle icon)

Now you have a good baseline to compare against. The next step is to perform the action you want to check for leaks. After that you can do the checking proper:

  • trigger garbage collection
  • expand the time range of the bottom graph by double-clicking on the bar just below the label for the “Timeline” pane (this expands the time window selector to “all time” (but it does not track, so new data are not graphed))

Now you can look at the bottom graph to see if the DOM nodes, event handlers, and Document counts returned to the baseline or not.

To compare heap memory usage you can follow these steps.

  • load the app/page in question
  • open the developer tools (ctrl-shift-j)
  • switch to the “Profiles” pane
  • take a heap snapshot (garbage is collected before the snapshot is taken)
  • perform the action you want to check for leaks
  • take a second heap snapshot

Now you can select the second snapshot and change “Summary” to “Comparison” to see the two snapshots compared.