web-dev-qa-db-fra.com

Comment puis-je modifier le comportement par défaut de console.log dans Safari?

Dans Safari sans add-ons, console.log affichera l'objet au dernier état d'exécution, et non à celui où console.log a été appelé.

Je dois cloner l'objet juste pour le sortir via console.log pour 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}
javascriptdebuggingconsoleloggingclone
143
Wesley

Je pense que vous recherchez 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 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 pouvez même analyser la chaîne JSON et obtenir un objet navigable comme celui que vous donnerait .dir ():

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

169
evan

Ce que je fais habituellement si je veux voir son état au moment de la journalisation, c’est que je le convertis simplement en chaîne JSON.

console.log(JSON.stringify(a));
71
Alex Turpin

Vanilla JS:

La réponse de @ evan semble meilleure ici. Il suffit (ab) d’utiliser JSON.parse/stringify pour réaliser 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 contenu de l'objet test et le consigne (pour qu'il ne change pas).

Solution spécifique AngularJS (1):

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

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

Fonction wrapper JS vanille:

Voici une fonction qui enveloppe console.log mais 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 supporte plusieurs arguments, et pas essayera 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})

25
Zach Lysobey

Ce > Object dans la console n'indique pas seulement l'état actuel. En fait, il reporte 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 développez le premier appel, il sera correct, si vous le faites avant le second retour console.log

6
Joe

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

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

Vous voudrez 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 imprimer des fichiers JSON avec JavaScript?

1
Andrew

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!

1
Migio B

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

https://debugjs.net/

Il suffit d’inclure le script dans votre page Web et de mettre 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}
1
Takashi Harano

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

0
A. Qaoud

On me tire peut-être sur cette suggestion, 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 causera un type de collision bibliothèque/fusion nucléaire/déchirement dans le continuum espace-temps. Mais cela fonctionne à merveille dans mes tests qUnit. :)

0
Dave