ember/ember-dataオブジェクトのライフサイクルの歩みはどうですか？ Ember.jsとEmber-Dataのデバッグに関するヒント/ヒント

Question

私はjavascriptをデバッグする方法を探していません。 Firefoxの新しいデバッグに慣れていないにもかかわらず、手元にあるツールにはかなり精通しています。

私は実際には、オブジェクト/関数がEmberの独自の呼び出しメカニズムを実行するために非常に簡単に渡されるため、スタックトレースを読み取る簡単な方法を探しています。どの機能が呼び出されているのか、それが結び付けられていることの追跡を失うのは簡単です。誰かがemberのスタックをデバッグするときに思いつくトリックや肺炎を持っていますか？

更新： これは非同期のデバッグに問題http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

Answer 1

まずの少ない、あなたが燃えさしのデバッグバージョンではなく、縮小さ製品版を使用したいということです。これにより、コンソールでより良い情報を得ることができます。

第2に、私にとって大きな助けになったことは、ルート、ビュー、コントローラ内のすべてのイベント内でデバッグを追加することです。

私はメインのAppクラスにdebugModeというプロパティを持っていて、次にログ機能を持っています。

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

log関数は、メッセージ、場所、およびオプションで適切なデータを取り込みます。

したがって、ログの2つの例は以下である：

1. ログ機能、および

   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. ログにデータコントローラ/ビュー/経路の初期化を渡す

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

その後、問題はこのように起こっている場所を診断しようとする偉大なコンソール情報が残され：

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} 

最後に、ビュー/ルート/コントローラ

の内部

debugger; 

でデバッグを使用し、

{{debugger}} 

及びコンソールまたはインラインから燃えさし情報を表示する

Ember.inspect(YOUR_OBJECT); 

を使用します。