Co powiesz na przechodzenie cyklu życia obiektów ember/ember-data. Lub wskazówki/porady dotyczące debugowania Ember.js i Ember-Data?

Question

Nie szukam sposobu debugowania javascript. Jestem dość zaznajomiony z dostępnymi narzędziami, aczkolwiek nieobeznany z nowatorskim debugowaniem Firefoksa, odkąd zbudowali oni własny "firebug".

Naprawdę po prostu szukam łatwego sposobu na odczytanie śladu stosu, ponieważ obiekty/funkcje są omijane dość łatwo, aby mogły być uruchamiane przez własne mechanizmy wywołania Ember. Łatwo zgubić się z tym, jaką funkcję ma wywoływać, i związaniem tego, do czego jest ona związana. Czy ktoś ma jakieś sztuczki lub pneumonikę, o których myślą podczas debugowania stosu Embera?

Aktualizacja: to z asynchronicznym debugowania http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

Answer 1

Pierwszy mniejszym problemem jest to, że będziesz chciał korzystać z wersji debug Cienia, a nie minified wersję produkcyjną. Dzięki temu uzyskasz lepsze informacje na temat embera w konsoli.

Po drugie, rzeczą, która bardzo mi pomogła, jest dodanie debugowania do wszystkich zdarzeń na moich trasach, widokach i kontrolerach.

Mam właściwość na mojej głównej klasy App o nazwie debugMode, a następnie funkcję dziennika.

window.App = Ember.Application.create({ 

    debugMode: false, 

    log: function(message, location, data) { 
     if (this.debugMode) { 
     if (data != null) { 
      if (typeof data === 'object') { 
      data = Ember.inspect(data); 
      } 
      console.log('DEBUG: ' + this.appName + ' : ' + location + ' : ' + message); 
      return console.log('DEBUG: ' + this.appName + ' : (continued) data: ' + data); 
     } else { 
      return console.log('DEBUG: ' + this.appName + ' : ' + location + ' : ' + message); 
     } 
    } 
} 

Funkcja rejestru przyjmuje komunikat, lokalizację i opcjonalnie odpowiednie dane.

więc dwa przykłady pozyskiwania drewna są poniżej:

1. dziennika funkcją i przechodzą w danych

   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. dzienniku inicjalizacji kontrolera/widok/droga

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

Będziesz następnie w lewo z wielką informacji konsoli, aby spróbować zdiagnozować gdzie sprawa dzieje się tak:

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} 

Wreszcie stosowanie debugowanie z

debugger; 

wewnątrz poglądów/Trasy/kontrolerów

i

{{debugger}} 

Wewnątrz szablonów

iz konsoli lub inline użytku

Ember.inspect(YOUR_OBJECT); 

aby wyświetlić informacje żaru.