6

JavaScriptをデバッグする方法を探していません。Firefox が独自の「firebug」を作成して以来、Firefox の新しいデバッグ機能には慣れていませんが、手元にあるツールについてはよく知っています。

オブジェクト/関数が非常に簡単に渡されてEmber独自の呼び出しメカニズムを介して実行されるため、スタックトレースを読み取る簡単な方法を本当に探しています。呼び出されている関数と、それがアタッチされている this のバインディングを見失うのは簡単です。誰かが ember のスタックをデバッグするときに考えているトリックや肺炎を持っていますか?

更新: これは非同期デバッグの問題ではありませんhttp://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

4

1 に答える 1

6

まず、縮小版の製品版ではなく、デバッグ版の ember を使用する必要があるということです。これにより、コンソールでより良い ember 情報が得られます。

次に、ルート、ビュー、およびコントローラーのすべてのイベント内にデバッグを追加することで、私にとって非常に役に立ちました。

メインの 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);
        }
    }
}

ログ関数は、メッセージ、場所、および必要に応じて関連するデータを取り込みます。

したがって、ロギングの 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);

エンバー情報を表示します。

于 2013-04-16T23:44:41.090 に答える