Come posso fare in modo che console.log mostri lo stato corrente di un oggetto?

In Safari senza componenti aggiuntivi (e in realtà la maggior parte degli altri browser), console.logmostrerà l'oggetto all'ultimo stato di esecuzione, non allo stato in cui è console.logstato chiamato.

Devo clonare l'oggetto solo per emetterlo via console.logper ottenere lo stato dell'oggetto su quella linea.

Esempio:

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

Penso che tu stia cercando console.dir().

console.log()non fa quello che vuoi perché stampa un riferimento all'oggetto e quando lo apri, è cambiato. console.dirstampa una directory delle proprietà nell'oggetto nel momento in cui viene chiamato.

L'idea JSON qui sotto è buona; potresti anche continuare ad analizzare la stringa JSON e ottenere un oggetto navigabile come quello che ti darebbe .dir ():

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

Quello che faccio di solito se voglio vedere il suo stato al momento in cui è stato registrato è semplicemente convertirlo in una stringa JSON.

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

Vanilla JS:

La risposta di @ evan sembra la migliore qui. Basta (ab) usare JSON.parse / stringify per creare in modo efficace una copia dell'oggetto.

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

Soluzione specifica di JQuery:

È possibile creare un'istantanea di un oggetto in un determinato momento con jQuery.extend

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

Ciò che sta realmente accadendo qui è che jQuery sta creando un nuovo oggetto con il testcontenuto dell'oggetto e registrandolo (quindi non cambierà).

Soluzione specifica AngularJS (1):

Angular fornisce una copyfunzione che può essere utilizzata per lo stesso effetto:angular.copy

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

Funzione wrapper Vanilla JS:

Ecco una funzione che avvolge console.logma farà una copia di tutti gli oggetti prima di disconnetterli.

Ho scritto questo in risposta ad alcune funzioni simili ma meno robuste nelle risposte. Supporta più argomenti e non proverà a copiare cose se non sono oggetti regolari .

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

esempio di utilizzo :consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

Quello > Objectnella console non mostra solo lo stato corrente. In realtà è rinviare la lettura dell'oggetto e le sue proprietà fino a quando non lo si espande.

Per esempio,

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

Quindi espandi la prima chiamata, sarà corretta, se lo fai prima che console.logritorni la seconda

usando il suggerimento di Xeon06, puoi analizzare il suo JSON in un oggetto, ed ecco la funzione di log che ora uso per scaricare i miei oggetti:

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

Ho definito un'utilità:

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

e quando voglio accedere alla console, faccio semplicemente:

MyLog("hello console!");

Funziona molto bene!

Potresti voler registrare l'oggetto in modo leggibile dall'uomo:

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

Questo rientra l'oggetto con 2 spazi ad ogni livello.

Come posso stampare graziosamente JSON usando JavaScript?

C'è un'opzione per usare una libreria di debugger.

https://debugjs.net/

Basta includere lo script nella tua pagina web e inserire le dichiarazioni del registro.

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

Registrazione

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

Potrei essere colpito per aver suggerito questo, ma questo può essere fatto un passo avanti. Possiamo estendere direttamente l'oggetto console stesso per renderlo più chiaro.

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

Non so se questo causerà qualche tipo di collisione della biblioteca / fusione nucleare / strappo nel continuum spazio-temporale. Ma funziona magnificamente nei miei test qUnit. :)

Basta aggiornare la pagina dopo aver aperto la console o aprire la console prima di inviare la richiesta alla pagina di destinazione ....

Stampa l'intero oggetto sulla console.

console.dir(object);