如何浏览ember/ember-data对象的生命周期.或者有关调试Ember.js和Ember-Data的提示/提示？

Question

我不是在寻找如何调试javascript.我对手头的工具非常熟悉,虽然他们不熟悉Firefox的新调试,因为他们建立了自己的"萤火虫".

我真的只是在寻找一种简单的方法来读取堆栈跟踪,因为对象/函数很容易通过Ember自己的调用机制来运行.很容易忘记被调用的函数以及它所附加的绑定.在调试ember的堆栈时,有没有人有他们想到的任何技巧或肺炎？

更新: 这不是异步调试的问题http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

Answer 1

首先,您需要使用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);
        }
    }
}

日志功能接收消息,位置,然后可选地接收相关数据.

因此,下面是两个日志记录示例:

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

查看余烬信息.