title: Finding JavaScript memory leaks with Chrome
body: <p>I've created a very simple test case that creates a Backbone view, attaches a handler to an event, and instantiates a user-defined class. I believe that by clicking the "Remove" button in this sample, everything will be cleaned up and there should be no memory leaks.</p>
  
  <p>A jsfiddle for the code is here: <a href="http://jsfiddle.net/4QhR2/" rel="noreferrer">http://jsfiddle.net/4QhR2/</a></p>
  
  <pre><code>// scope everything to a function
  function main() {
  
      function MyWrapper() {
          this.element = null;
      }
      MyWrapper.prototype.set = function(elem) {
          this.element = elem;
      }
      MyWrapper.prototype.get = function() {
          return this.element;
      }
  
      var MyView = Backbone.View.extend({
          tagName : "div",
          id : "view",
          events : {
              "click #button" : "onButton",
          },    
          initialize : function(options) {        
              // done for demo purposes only, should be using templates
              this.html_text = "&lt;input type='text' id='textbox' /&gt;&lt;button id='button'&gt;Remove&lt;/button&gt;";        
              this.listenTo(this,"all",function(){console.log("Event: "+arguments[0]);});
          },
          render : function() {        
              this.$el.html(this.html_text);
  
              this.wrapper = new MyWrapper();
              this.wrapper.set(this.$("#textbox"));
              this.wrapper.get().val("placeholder");
  
              return this;
          },
          onButton : function() {
              // assume this gets .remove() called on subviews (if they existed)
              this.trigger("cleanup");
              this.remove();
          }
      });
  
      var view = new MyView();
      $("#content").append(view.render().el);
  }
  
  main();
  </code></pre>
  
  <p>However, I am unclear how to use Google Chrome's profiler to verify that this is, in fact, the case. There are a gazillion things that show up on the heap profiler snapshot, and I have no idea how to decode what's good/bad. The tutorials I've seen on it so far either just tell me to "use the snapshot profiler" or give me a hugely detailed manifesto on how the entire profiler works. Is it possible to just use the profiler as a tool, or do I really have to understand how the whole thing was engineered?</p>
  
  <p><strong>EDIT:</strong> Tutorials like these:</p>
  
  <p><a href="https://docs.google.com/presentation/d/1wUVmf78gG-ra5aOxvTfYdiLkdGaR9OhXRnOlIcEmu2s/pub?start=false&amp;loop=false&amp;delayms=3000#slide=id.g14717ff3_0_23" rel="noreferrer">Gmail memory leak fixing</a></p>
  
  <p><a href="http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/" rel="noreferrer">Using DevTools</a></p>
  
  <p>Are representative of some of the stronger material out there, from what I've seen. However, beyond introducing the concept of the <em>3 Snapshot Technique</em>, I find they offer very little in terms of practical knowledge (for a beginner like me). The 'Using DevTools' tutorial doesn't work through a real example, so its vague and general conceptual description of things aren't overly helpful. As for the 'Gmail' example:</p>
  
  <blockquote>
    <p><strong><em>So you found a leak. Now what?</em></strong></p>
    
    <ul>
    <li><p>Examine the retaining path of leaked objects in the lower half of the Profiles panel</p></li>
    <li><p>If the allocation site cannot be easily inferred (i.e. event listeners):</p></li>
    <li><p>Instrument the constructor of the retaining object via the JS console to save the stack trace for allocations</p></li>
    <li><p>Using Closure? Enable the appropriate existing flag (i.e. goog.events.Listener.ENABLE_MONITORING) to set the creationStack property during construction</p></li>
    </ul>
  </blockquote>
  
  <p>I find myself more confused after reading that, not less. And, again, it's just telling me to <em>do</em> things, not <em>how</em> to do them. From my perspective, all of the information out there is either too vague or would only make sense to someone who already understood the process.</p>
  
  <p>Some of these more specific issues have been raised in <a href="https://stackoverflow.com/a/19726918/20578">@Jonathan Naguin's answer</a> below.</p>