So ermitteln Sie mithilfe von Chrome Dev Tools, was auf eine gelöste DOM-Struktur verweist

Question

Ich versuche herauszufinden, wie genau die Variable abgerufen werden kann, die in einer gelösten DOM-Struktur auf etwas verweist. Ich habe das Problem auf zwei einfache Ansichten reduziert, und ich versuche, Chrome Dev Tools (in der Vergleichsansicht) zu verwenden, um herauszufinden, was auf die gelösten Knoten verweist. Ich habe ein Bild von dev Werkzeugen angebracht ...

Der untere Teil der Entwickler-Tool zeigt, dass el von HomeView ein div geschaffen hat, die abgehängt wurde. Aber ich bin mir nicht sicher, wohin ich von dort aus gehen soll.

Ich habe eine Reihe von Stack-Überlauf-Posts und Blog-Posts über das Lokalisieren von Speicherlecks gelesen, aber ich kann das immer noch nicht herausfinden. Ich weiß, dass Backbone besonders wahrscheinlich Speicherlecks verursacht, also habe ich die "Zombie-Tötungs" -Techniken implementiert, aber das Speicherleck ist immer noch da. Hier sind meine Ansichten:

Hilfe anzeigen

// Generated by CoffeeScript 1.6.3 
    (function() { 
     var __hasProp = {}.hasOwnProperty, 
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; 

     define(['jquery', 'jquerymobile', 'underscore', 'backbone'], function($, Mobile, _, Backbone) { 
     var HelpView, _ref; 
     return HelpView = (function(_super) { 
      __extends(HelpView, _super); 

      function HelpView() { 
      _ref = HelpView.__super__.constructor.apply(this, arguments); 
      return _ref; 
      } 

      HelpView.prototype.initialize = function() { 
      return _.bindAll(this, "render", "jqdisplay", "close"); 
      }; 

      HelpView.prototype.render = function() { 
      $(this.el).html("Help View"); 
      return this; 
      }; 

      HelpView.prototype.jqdisplay = function() {}; 

      HelpView.prototype.close = function() { 
      console.log('THIS', this); 
      console.log($(this.el)[0].parentNode); 
      $(this.el)[0].parentNode.removeChild($(this.el)[0]); 
      this.undelegateEvents(); 
      $(this.el).removeData().unbind(); 
      this.remove(); 
      this.unbind(); 
      Backbone.View.prototype.remove.call(this); 
      return delete this; 
      }; 

      return HelpView; 

     })(Backbone.View); 
     }); 

    }).call(this); 

Home Ansicht

// Generated by CoffeeScript 1.6.3 
    (function() { 
     var __hasProp = {}.hasOwnProperty, 
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; 

     define(['jquery', 'jquerymobile', 'underscore', 'backbone'], function($, Mobile, _, Backbone) { 
     var HomeView, _ref; 
     return HomeView = (function(_super) { 
      __extends(HomeView, _super); 

      function HomeView() { 
      _ref = HomeView.__super__.constructor.apply(this, arguments); 
      return _ref; 
      } 

      HomeView.prototype.initialize = function() { 
      return _.bindAll(this, "render", "jqdisplay", "close"); 
      }; 

      HomeView.prototype.render = function() { 
      $(this.el).html("Home View"); 
      return this; 
      }; 

      HomeView.prototype.jqdisplay = function() {}; 

      HomeView.prototype.close = function() { 
      console.log('THIS', this); 
      console.log($(this.el)[0].parentNode); 
      $(this.el)[0].parentNode.removeChild($(this.el)[0]); 
      this.undelegateEvents(); 
      $(this.el).removeData().unbind(); 
      this.remove(); 
      this.unbind(); 
      Backbone.View.prototype.remove.call(this); 
      return delete this; 
      }; 

      return HomeView; 

     })(Backbone.View); 
     }); 

    }).call(this); 

... und dann nenne ich die "Schließen" Methode jeder Ansicht in einem Verfahren in meinem Router .. .

MyRouter.prototype.showView = function(view) { 
    console.log('THIS', this); 
    console.log("next view", view); 
    console.log(this.currentView); 
    if (this.currentView) { 
     console.log('closing the current view...', this.currentView); 
     console.log('starting', $('[data-role="content"]').html()); 
     this.currentView.close(); 
     delete this.currentView; 
     console.log('remaining', $('[data-role="content"]').html()); 
     console.log('should be empty', this.currentView); 
    } 
    this.currentView = view; 
    this.currentView.render(); 
    $('[data-role="content"]').html(this.currentView.el); 
    if (this.currentView.jqdisplay) { 
     return this.currentView.jqdisplay(); 
    } 
    }; 

Eine Live-Demo des Lecks ist hier: http://bit.ly/15xPrW7. Das auslösende Verhalten verwendet das Menü, um zwischen den beiden Seiten zu navigieren.

Jede Hilfe wäre willkommen! Vielen Dank!

Answer 1

Ug Kaffeesekript.

Abgesehen davon, immer wenn Sie Speicherleckjagd mit jquery auf der Seite sind, müssen Sie den jquery dom Cache deaktivieren. In meiner kurzen Wiedergabe der Beispielwebsite, mit der Sie verknüpft sind, bin ich ziemlich sicher, dass einige der gelösten Knoten, die ich sehe, in diesem Cache sind.

$.expr.cacheLength = 1; 

Dies ist sehr schlecht dokumentiert, aber sollten Sie nach unten helfen zu jagen, wo Ihre tatsächlichen Lecks kommen.