Làm thế nào để đi bộ qua vòng đời của các đối tượng dữ liệu ember/ember. Hoặc mẹo/gợi ý để gỡ lỗi Ember.js và Ember-Data?

Question

Tôi không tìm cách gỡ lỗi javascript. Tôi khá quen thuộc với các công cụ trong tay, mặc dù không quen với việc gỡ lỗi mới của Firefox kể từ khi họ xây dựng "firebug" của riêng mình.

Tôi thực sự đang tìm kiếm một cách dễ dàng để đọc dấu vết ngăn xếp khi các đối tượng/hàm được truyền xung quanh khá dễ dàng để chạy qua các cơ chế gọi của Ember. Thật dễ dàng để mất theo dõi những chức năng mà nó đang được gọi và ràng buộc của nó mà nó gắn liền với nó. Có ai có bất kỳ thủ đoạn hoặc pneumonics họ nghĩ đến khi gỡ lỗi stack của ember?

Cập nhật: này là ít hơn của một vấn đề với async gỡ lỗi http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/

Answer 1

Thứ nhất, là bạn sẽ muốn sử dụng phiên bản debug của ember, không phải là phiên bản sản xuất được rút gọn. Điều này sẽ cung cấp cho bạn thông tin ember tốt hơn trong giao diện điều khiển.

Thứ hai, điều đã giúp ích rất nhiều cho tôi, là thêm vào gỡ lỗi trong tất cả các sự kiện trong các tuyến đường, chế độ xem và bộ điều khiển của tôi.

Tôi có một thuộc tính trên lớp Ứng dụng chính của tôi được gọi là debugMode và sau đó là chức năng nhật ký.

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

Chức năng nhật ký có trong thông điệp, vị trí và sau đó tùy chọn dữ liệu thích hợp.

Vì vậy, hai ví dụ về khai thác gỗ dưới đây:

1. log một chức năng, và vượt qua trong dữ liệu

   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 việc khởi tạo một bộ điều khiển/xem/đường

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

Bạn sẽ sau đó bị bỏ lại với thông tin giao diện điều khiển tuyệt vời để thử để chẩn đoán nơi vấn đề đang xảy ra như thế này:

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} 

Cuối cùng, sử dụng gỡ lỗi với

debugger; 

bên trong views/tuyến/điều khiển

và

{{debugger}} 

bên trong mẫu của bạn

và từ bàn điều khiển hoặc inline sử dụng

Ember.inspect(YOUR_OBJECT); 

để xem các thông tin ember.