Wie wäre es mit einem Spaziergang durch den Lebenszyklus von ember/ember-data Objekten? Oder Tipps/Hinweise zum Debuggen von Ember.js und Ember-Data?

Question

Ich bin nicht auf der Suche nach Javascript zu debuggen. Ich bin ziemlich vertraut mit den Tools zur Hand, wenn auch nicht vertraut mit Firefox neuartigen Debugging seit sie ihren eigenen "Firebug" gebaut haben.

Ich bin wirklich nur auf der Suche nach einer einfachen Möglichkeit, die Stack-Trace zu lesen, wie Objekte/Funktionen ziemlich leicht weitergegeben werden, um durch Embers eigene Aufrufmechanismen durchlaufen werden. Es ist leicht, den Überblick darüber zu verlieren, welche Funktion aufgerufen wird und an welche es gebunden ist. Hat jemand irgendwelche Tricks oder Pneumonics, an die er beim Debuggen von Embers Stack denkt?

Update: ist dies weniger ein Problem mit Asynchron-Debugging http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

Answer 1

Zuerst ist, dass Sie die Debug-Version von Ember nutzen wollen, nicht die minimierte Produktionsversion. Dadurch erhalten Sie bessere Glut Informationen in der Konsole.

Zweitens, die Sache, die für mich sehr hilfreich war, ist das Debuggen in allen meinen Ereignissen in meinen Routen, Ansichten und Controllern hinzuzufügen.

Ich habe eine Eigenschaft auf meiner Haupt-App-Klasse debugMode und dann eine Protokollfunktion.

Die Log-Funktion übernimmt die Nachricht, Ort und dann optional Daten relevant.

So werden zwei Beispiele für die Protokollierung sind unten:

1. log eine Funktion, und übergeben Daten

   App.ProfileController = Ember.ObjectController.extend({ 
   
       setProfile: function() { 
       App.log("setting current user's profile", 'App.ProfileController.setProfile', App.currentUser); 
       //do other stuff with the profile 
       } 
   }) 
   

2. log die Initialisierung einer Steuer-/view/route

   App.EventController = Ember.ObjectController.extend({ 
       init: function() { 
       this._super(); 
       App.log('initializing event controller', 'App.EventController.init'); 
       return this.set('isLoading', false); 
       } 
   }) 
   

Sie werden dann mit großer Konsole Informationen gelassen werden, um zu versuchen zu diagnostizieren, wo die Frage, wie dies geschieht:

DEBUG: My App Name : App.ApplicationController : application controller initializing 
DEBUG: My App Name : App.ApplicationRoute.setupController : setupController called 
DEBUG: My App Name : (continued) data: {target: <App.Router:ember249>, namespace: App, container: [object Object], _debugContainerKey: 
DEBUG: My App Name : App.accountController.setCurrentUser : setting applications currentUser object 
DEBUG: My App Name : (continued) data: {"id":3,"username":"bob","firstName":"Bob","lastName":"W","updatedAt":"2013-04-16T06:29:39.731Z"} 
DEBUG: My App Name : App.EventController.init : initializing event controller 
DEBUG: My App Name : App.EventRoute.setupController : setupController called 
DEBUG: My App Name : (continued) data: {target: <App.Router:ember249>, namespace: App, container: [object Object], _debugContainerKey: controller:event, _childContainers: [object Object], isLoading: false} 

Schließlich Verwendung Debuggen mit

debugger; 

innerhalb der Ansichten/Routen/Controller

und

{{debugger}} 

innerhalb Ihrer Vorlagen

und von der Konsole oder Inline Verwendung

Ember.inspect(YOUR_OBJECT); 

die Glut Informationen anzuzeigen.