Comment puis-je faire en sorte que console.log affiche l'état actuel d'un objet?

Dans Safari sans add-on (et en fait la plupart des autres navigateurs), console.logaffichera l'objet au dernier état d'exécution, pas à l'état où il a console.logété appelé.

Je dois cloner l'objet juste pour le sortir via console.logpour obtenir l'état de l'objet à cette ligne.

Exemple:

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

Je pense que vous cherchez console.dir().

console.log()ne fait pas ce que vous voulez car il imprime une référence à l'objet, et au moment où vous l'ouvrez, il est changé. console.dirimprime un répertoire des propriétés de l'objet au moment où vous l'appelez.

L'idée JSON ci-dessous est bonne; vous pouvez même analyser la chaîne JSON et obtenir un objet navigable comme ce que .dir () vous donnerait:

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

Ce que je fais habituellement si je veux voir son état au moment où il a été enregistré, c'est que je le convertis simplement en une chaîne JSON.

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

Vanille JS:

La réponse de @ evan semble la meilleure ici. Il suffit (ab) d'utiliser JSON.parse / stringify pour créer efficacement une copie de l'objet.

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

Solution spécifique à JQuery:

Vous pouvez créer un instantané d'un objet à un moment donné avec jQuery.extend

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

Ce qui se passe réellement ici, c'est que jQuery crée un nouvel objet avec le test contenu de objet et enregistre cela (pour qu'il ne change pas).

Solution spécifique AngularJS (1):

Angular fournit une copyfonction qui peut être utilisée pour le même effet:angular.copy

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

Fonction wrapper Vanilla JS:

Voici une fonction qui encapsule console.logmais fera une copie de tous les objets avant de les déconnecter.

J'ai écrit ceci en réponse à quelques fonctions similaires mais moins robustes dans les réponses. Il prend en charge plusieurs arguments et n'essaiera pas de copier des choses si ce ne sont pas des objets normaux .

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

exemple d'utilisation :consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

Cette > Object dans la console, ne montre pas seulement l'état actuel. Il diffère en fait la lecture de l'objet et de ses propriétés jusqu'à ce que vous les développiez.

Par exemple,

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

Puis développez le premier appel, ce sera correct, si vous le faites avant le console.logretour du second

en utilisant l'indication de Xeon06, vous pouvez analyser son JSON dans un objet, et voici la fonction de journalisation que j'utilise maintenant pour vider mes objets:

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

J'ai défini un utilitaire:

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

et quand je veux me connecter à la console, je fais simplement:

MyLog("hello console!");

Il fonctionne très bien!

Vous souhaiterez peut-être enregistrer l'objet d'une manière lisible par l'homme:

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

Cela indente l'objet avec 2 espaces à chaque niveau.

Comment puis-je imprimer JSON avec JavaScript?

Il existe une option pour utiliser une bibliothèque de débogage.

https://debugjs.net/

Incluez simplement le script dans votre page Web et mettez des instructions de journal.

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

Enregistrement

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

Je peux être abattu pour avoir suggéré cela, mais cela peut aller plus loin. Nous pouvons directement étendre l'objet console lui-même pour le rendre plus clair.

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

Je ne sais pas si cela provoquera un certain type de collision de bibliothèque / fusion nucléaire / déchirure dans le continuum de l'espace-temps. Mais cela fonctionne à merveille dans mes tests qUnit. :)

Actualisez simplement la page après avoir ouvert la console ou ouvrez la console avant de soumettre la demande à la page ciblée ...

Imprimez simplement l'objet entier sur la console.

console.dir(object);