Console.log'un bir nesnenin mevcut durumunu göstermesini nasıl sağlayabilirim?

Eklenti console.logiçermeyen Safari'de (ve aslında diğer tarayıcıların çoğu), nesneyi console.logçağrıldığı durumda değil, son yürütme durumunda gösterecektir .

console.logNesnenin o satırdaki durumunu elde etmek için nesneyi sadece çıktı olarak klonlamam gerekiyor.

Misal:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}

Sanırım arıyorsun console.dir().

console.log()istediğiniz şeyi yapmaz çünkü nesneye bir referans yazdırır ve onu açtığınızda değişir. console.dironu çağırdığınız anda nesnedeki özelliklerin bir dizinini yazdırır.

Aşağıdaki JSON fikri iyi bir fikirdir; JSON dizesini ayrıştırmaya devam edebilir ve .dir () 'nin size vereceği gibi göz atılabilir bir nesne elde edebilirsiniz:

console.log(JSON.parse(JSON.stringify(obj)));

Günlüğe kaydedildiği andaki durumunu görmek istersem genellikle yaptığım şey onu bir JSON dizesine dönüştürmemdir.

console.log(JSON.stringify(a));

Vanilya JS:

@ evan'ın cevabı burada en iyi görünüyor. Sadece (ab), nesnenin bir kopyasını etkili bir şekilde oluşturmak için JSON.parse / stringify kullanın.

console.log(JSON.parse(JSON.stringify(test)));

JQuery'ye özel çözüm:

İle belirli bir zamanda bir nesnenin anlık görüntüsünü oluşturabilirsiniz. jQuery.extend

console.log($.extend({}, test));

Burada gerçekte olan şey, jQuery testnesnenin içeriğiyle yeni bir nesne oluşturuyor ve bunu günlüğe kaydetiyor (böylece değişmeyecek).

AngularJS (1) özel çözüm:

Açısal copy, aynı etkiyle kullanılabilecek bir işlev sağlar :angular.copy

console.log(angular.copy(test));

Vanilla JS sarmalayıcı işlevi:

İşte console.logherhangi bir nesneyi sarmalayan ancak oturumu kapatmadan önce bir kopyasını oluşturan bir işlev .

Bunu yanıtlardaki birkaç benzer ancak daha az sağlam işleve yanıt olarak yazdım. Birden fazla argüman destekler ve olacak değil bunlar değilse şeyleri kopyalamak için deneyin düzenli nesneler.

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

örnek kullanım :consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

Bu > Object konsoldaki, sadece mevcut durumu gösterilmiyor. Aslında, siz genişletene kadar nesneyi ve özelliklerini okumayı erteliyor.

Örneğin,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

Sonra ilk aramayı genişletin, ikinci console.logdönüşten önce yaparsanız doğru olacaktır.

Xeon06'nın ipucunu kullanarak, JSON'sini bir nesnede ayrıştırabilirsiniz ve şimdi nesnelerimi dökmek için kullandığım günlük işlevi:

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}

Bir yardımcı program tanımladım:

function MyLog(text) {
    console.log(JSON.stringify(text));
}

ve konsolda oturum açmak istediğimde şunu yapıyorum:

MyLog("hello console!");

Çok iyi çalışıyor!

Nesneyi insan tarafından okunabilir bir şekilde günlüğe kaydetmek isteyebilirsiniz:

console.log(JSON.stringify(myObject, null, 2));

Bu, nesneyi her düzeyde 2 boşlukla girintiler.

JSON'u JavaScript kullanarak nasıl güzel yazdırabilirim?

Hata ayıklayıcı kitaplığı kullanma seçeneği vardır.

https://debugjs.net/

Sadece komut dosyasını web sayfanıza ekleyin ve günlük ifadeleri yerleştirin.

<script src="debug.js"></script>

Kerestecilik

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}

Bunu önerdiğim için vurulabilirim ama bu bir adım daha ileri götürülebilir. Daha net hale getirmek için konsol nesnesinin kendisini doğrudan genişletebiliriz.

console.logObject = function(o) {
  (JSON.stringify(o));
}

Bunun uzay-zaman sürekliliğinde bir tür kütüphane çarpışmasına / nükleer erimeye / parçalanmaya neden olup olmayacağını bilmiyorum. Ama qUnit testlerimde güzel çalışıyor. :)

Konsolu açtıktan sonra sayfayı yenilemeniz veya isteği hedeflenen sayfaya göndermeden önce konsolu açmanız yeterlidir ...

Sadece tüm nesneyi konsola yazdırın.

console.dir(object);