Hata ayıklama Javascript (Omurga ve Kertenkele)

Question

Şu anda, chrome dev araçlarını kullanarak omurga veya korsanı hata ayıklarken, sonlandırma noktaları ve neyi ayarlayacağımı bilemiyorum, ancak kod duraklatıldığında, ne tür nesneler olduğunu söylemek zor Çalışıyorum çünkü krom her şeyi bir "çocuk" olarak etiketliyor.
(bence bu yapıcı işlevidir)

Bu bildirimi değiştirmek veya kullanacağım model/koleksiyon türünü belirlemek için herhangi bir kolay yol var mı? Böyle bir şeyi yapmaya başlamak istiyor tutara, bu çılgınlıkları onlarla birlikte yaşıyor

neden olur:

MyModel = Backbone.Model.Extend({ 
    // the $$$ puts it at the top of the inspector, the NAME is just for other devs 
    $$$NAME = "MyModel", 
    ... 
}); 

I do not gerçekten isterseniz, çünkü onun ... çirkin, onun değişken ... ve sadece değişkeni incelediğimde ve genişlettiklerinde yardımcı olur ... kromu görüntülemek için kullandığı ismi değiştirmek harika olur.

Her durumda, adı nasıl değiştireceğini bilen var mı? ya da kullandığınız başka bir temizleyici sözleşmesi var mı?

Teşekkürler!

Mat

Answer 1

Arka Plan

Konsolun/hata ayıklayıcısındaki omurga nesnelerinin türünü görüntülemek için tarayıcının "alt öğe" yi neden kullandığını anlamak ilginç.

Tüm JavaScript nesneleri, bir nesne oluşturmak için kullanılan işlevine bir constructor özelliğine sahiptir. Yapıcı, nesnenin konsolda/hata ayıklayıcıda "tipini" görüntülemek için tarayıcı tarafından kullanılır. Boş değilse, yapıcı işlevinin name özelliğinin değeri kullanılır. anonim fonksiyonları ile ne olur Yani

var B = function() { }; 
console.log(B.name); // '' 

:

function A() { } 
console.log(A.name); // 'A' 

Anonim işlevler boş adı özelliği vardır: Ancak sadece fonksiyonlar adlı işlev ifadeleri yararlı bir isim özelliği alma kullanılarak tanımlanır? Chrome, anonim işlevlerin adını, işlevin ilk atanacağı değişken veya özellik adından alır.İşte bazı örnekler:

// 1. named function expression - objects will show as “a” in the console 
function a() { … } 

// 2. anonymous function assigned to variable - objects will show as “b” in the console 
var b = function(){ … }; 

// 3. anonymous function assigned to property of object - objects will show as “container.c” in the debugger 
var container = { 
    c: function() { … } 
}; 

daha ayrıntılı bir senaryo burada mevcuttur: http://jsfiddle.net/danmalcolm/Xa7ma/6/

tarayıcı kaynak kodundan bu adı almak için görünür - zamanında söyleyebilirim bir JavaScript özelliği yoktur Bir fonksiyonun atandığı ilk değişkenin adı. Diğer tarayıcılar, anonim yapıcı işlevlerinde tanımlanmış bir displayName özelliğinin kullanıldığı bir sözleşmeyi destekler, ancak bu şu anda Chrome: http://code.google.com/p/chromium/issues/detail?id=17356'da gerçekleşmez.

, özel bir yapıcı (aşağıya bakınız) kullanmıyorsanız varsayarak, Backbone dönersek olarak Modeli, View, Koleksiyon ve Rota tarafından kullanılan Backbone's extend function oluşturulan anonim bir yapıcı işlevi ile sona erecek senin tipin, aşağıdaki gibidir:

child = function(){ return parent.apply(this, arguments); }; 

Bu yüzden konsolda/hata ayıklayıcıda omurga nesnelerinizin yanında “alt” görüyorsunuz. Nesnenin yapıcısına uygun bir adda tarayıcının en iyi tahminidir.

Çözümler

Eğer Omurga türlerini tanımlarken öncelikle “protoProps” argümanı kullanarak da adlandırılmış yapıcı sağlayabilmektedir, Nesnelerinizin daha iyi bir tür adı vermek. şöyle Sadece “üst” yapıcı bir çağrı sarar bir yapıcı özelliği ekleyin:

var Product = Backbone.Model.extend({ 
    constructor: function Product() { 
     Backbone.Model.prototype.constructor.apply(this, arguments); 
    } 
}); 

Ürününüzün modeli örnekleri şimdi ayıklayıcısında gerçekten güzel görüneceğini.

Bunu tanımladığınız her Görünüm, Model, Toplama ve Rota için bunu yapmak biraz hantaldır. İşi sizin için yapmak için Backbone’un genişletme işlevini maymun yama yapabilirsin.

Türlerinizin türlerini tanımlamak için önce bir sözleşme oluşturmanız gerekir.

var Product = Backbone.Model.extend({ 
    __name__: 'Product' 
    // other props 
}); 

Daha sonra bu özelliği okuyun ve türüne adlandırılmış yapıcı eklemek Modeli, View, Koleksiyon ve Rota kullandığı uzatmak işlevini değiştirin: Burada şöyle belirttiğiniz __name__ özelliğini kullanıyorsunuz. Backbone.js'nin kendisini değiştirmenize gerek yoktur, sadece aşağıdakileri, backbone.js'den sonra yüklenen ayrı bir komut dosyasına ekleyin.

(function() { 

    function createNamedConstructor(name, constructor) { 

     var fn = new Function('constructor', 'return function ' + name + '()\n' 
      + '{\n' 
      + ' // wrapper function created dynamically for "' + name + '" constructor to allow instances to be identified in the debugger\n' 
      + ' constructor.apply(this, arguments);\n' 
      + '};'); 
     return fn(constructor); 
    } 

    var originalExtend = Backbone.View.extend; // Model, Collection, Router and View shared the same extend function 
    var nameProp = '__name__'; 
    var newExtend = function (protoProps, classProps) { 
     if (protoProps && protoProps.hasOwnProperty(nameProp)) { 
      // TODO - check that name is a valid identifier 
      var name = protoProps[nameProp]; 
      // wrap constructor from protoProps if supplied or 'this' (the function we are extending) 
      var constructor = protoProps.hasOwnProperty('constructor') ? protoProps.constructor : this; 
      protoProps = _.extend(protoProps, { 
       constructor: createNamedConstructor(name, constructor) 
      }); 
     } 
     return originalExtend.call(this, protoProps, classProps); 
    }; 

    Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = newExtend; 
})(); 

Answer 2

Evet. Adlandırılmış işlev ifadesi kullanarak model/koleksiyon/görünüm constructor'u geçersiz kılarak konsol görünen adını değiştirebilirsiniz.

var model = new Model({id:1,foo:"bar"}) 

console.log("state: " + model); 
console.log(model); 

Sen alırsınız: Yani

App.Model = Backbone.Model.extend({ 

    //define constructor using a named function expression 
    constructor: function Model() { 
    Backbone.Model.prototype.constructor.apply(this, arguments); 
    }, 

    //override toString to return something more meaningful 
    toString: function() { 
    return "Model(" + JSON.stringify(this.attributes) + ")"; 
    } 
}); 

: Model diyelim ki, birlikte dize türü zorlanır zaman da, + operatör konsol çıktısını kontrol etmek toString geçersiz kılmak için helpul olabilir :

state: Model({"id":1,"foo":"bar"}) 
► Model 

Answer 3

hata ayıklama için bu libraryextension bu kullanmayı düşünün.

Answer 4

Ayrıca uygulamanın üst kısmındaki

"use strict" 

eklemeyi deneyin. Backbone.marionette.js satır 1'de undefined gibi yığın izleme hataları vermek yerine, örnek çıktı ve HistoryView bulunmayan daha açıklayıcı bilgiler olur.