पता लगाने के लिए कैसे क्या Chrome डेवलपर टूल

Question

मैं यह पता लगाने की वास्तव में कैसे जो चर एक अलग डोम वृक्ष में कुछ संदर्भित कर रहा है पाने के लिए कोशिश कर रहा हूँ का उपयोग कर एक अलग डोम पेड़ संदर्भित कर रहा है। मैंने समस्या को दो सरल विचारों से अलग कर दिया है, और अलग-अलग नोड्स का संदर्भ देने के लिए मैं क्रोम देव उपकरण (तुलना दृश्य में) का उपयोग करने का प्रयास कर रहा हूं। मैं देव उपकरणों की एक छवि संलग्न किया है ...

देव उपकरण के निचले हिस्से से पता चलता है कि HomeView की el एक div कि अलग हो गया बनाया गया है। लेकिन मुझे यकीन नहीं है कि वहां से कहाँ जाना है।

मैंने मेमोरी लीक को इंगित करने पर स्टैक ओवरफ़्लो पोस्ट और ब्लॉग पोस्ट के समूह के माध्यम से पढ़ा है, लेकिन मैं अभी भी इसे एक नहीं समझ सकता। मुझे पता है कि बैकबोन विशेष रूप से स्मृति रिसाव का कारण बनने की संभावना है, इसलिए मैंने "ज़ोंबी-हत्या" तकनीकों को लागू किया है, लेकिन स्मृति रिसाव अभी भी वहां है। यहाँ मेरे विचार कर रहे हैं:

मदद देखें

// 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); 

होम देखें

// 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); 

... और फिर मैं अपने रूटर में "बंद" एक विधि में प्रत्येक दृश्य की विधि कॉल .. ।

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(); 
    } 
    }; 

रिसाव का एक लाइव डेमो यहाँ है: http://bit.ly/15xPrW7। लीक-ट्रिगरिंग व्यवहार दो पृष्ठों के बीच नेविगेट करने के लिए मेनू का उपयोग कर रहा है।

किसी भी मदद की सराहना की जाएगी! धन्यवाद!

Answer 1

यूग कॉफ़ीस्क्रिप्ट।

उस तरफ, जब भी आप jquery dom cache को अक्षम करने के लिए आवश्यक पृष्ठ पर jquery के साथ स्मृति रिसाव शिकार कर रहे हैं। उदाहरण साइट के साथ मेरे संक्षिप्त खेल में आपने लिंक किया है, मुझे पूरा यकीन है कि कुछ अलग नोड्स जो मैं देख रहा हूं उस कैश में हैं।

$.expr.cacheLength = 1; 

यह बहुत खराब दस्तावेज है, लेकिन आपकी वास्तविक लीक कहां से आ रही है, यह जानने में आपकी सहायता करनी चाहिए।