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

Question

Dans Safari sans modules complémentaires (et en fait dans la plupart des autres navigateurs), console.log montrera l'objet au dernier état d'exécution, et non pas à l'état où il a été exécuté. console.log a été appelé.

Je dois cloner l'objet juste pour l'éditer via console.log pour obtenir l'état de l'objet à cette ligne.

Ejemplo:

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

Answer 1

Je pense que vous recherchez console.dir() .

console.log() ne fait pas ce que vous voulez parce qu'elle imprime une référence à l'objet, et au moment où vous l'ouvrez, il a changé. console.dir imprime 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 pourriez même analyser la chaîne JSON et obtenir un objet consultable comme ce que .dir() vous donnerait :

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

Answer 2

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

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

Answer 3

Vanilla JS :

Réponse de @evan semble être la meilleure solution. Il suffit d'utiliser JSON.parse/stringify pour faire 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é à l'aide de la fonction jQuery.extend

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

Ce qui se passe ici, c'est que jQuery crée un nouvel objet avec l'attribut test et l'enregistre (pour qu'il ne change pas).

Solution spécifique AngularJS (1) :

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

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

Fonction enveloppante de JS Vanilla :

Voici une fonction qui enveloppe console.log mais fera une copie de tous les objets avant de les déconnecter.

J'ai écrit cette fonction en réponse à quelques fonctions similaires mais moins robustes dans les réponses. Elle prend en charge plusieurs arguments et no essayer de copier des choses qui ne le sont pas régulière objets.

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

Answer 4

Cela > Object dans la console, ne montre pas seulement l'état actuel. Elle reporte en fait la lecture de l'objet et de ses propriétés jusqu'à ce que vous le développiez.

Par exemple,

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

Puis étendre le premier appel, ce sera correct, si vous le faites avant le second console.log retours

Answer 5

Je risque de me faire tirer dessus pour avoir suggéré cela, mais on peut aller encore 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 une collision de bibliothèques, une fusion nucléaire ou une rupture du continuum spatio-temporel. Mais cela fonctionne parfaitement dans mes tests qUnit :)