Quelle est la différence entre console.dir et console.log?

357

Dans Chrome, l' consoleobjet définit deux méthodes qui semblent faire la même chose:

console.log(...)
console.dir(...)

J'ai lu quelque part en ligne qui dirprend une copie de l'objet avant de l'enregistrer, alors que logje passe simplement la référence à la console, ce qui signifie qu'au moment où vous allez inspecter l'objet que vous avez enregistré, il peut avoir changé. Cependant, certains tests préliminaires suggèrent qu'il n'y a pas de différence et qu'ils souffrent tous les deux de la possibilité de montrer des objets dans des états différents de ceux lorsqu'ils étaient enregistrés.

Essayez ceci dans la console Chrome ( Ctrl+ Shift+ J) pour voir ce que je veux dire:

> o = { foo: 1 }
> console.log(o)
> o.foo = 2

Maintenant, développez le [Object]sous l'instruction log et notez qu'elle s'affiche fooavec une valeur de 2. Il en va de même si vous répétez l'expérience en utilisant dirau lieu delog .

Ma question est, pourquoi ces deux fonctions apparemment identiques existent-elles console?

Drew Noakes
la source
65
Essayez console.log([1,2])et console.dir([1,2])vous verrez la différence.
Felix Kling
Dans Firebug, le contenu d'un objet connecté avec console.dirne change pas, donc cela fait une grande différence.
Eugene Yarmash
3
Attention à console.dir(): cette fonctionnalité n'est pas standard ! Alors ne l'utilisez pas en production;)
fred727
2
L'URL de cette question est affichée dans l' image sur Mozilla Developer Network - Console.log () - Différence avec console.dir () .
user7393973
1
@ user7393973 nice find! En fait, l'image provient de ma réponse ci-dessous, elle a donc été capturée sur mon ordinateur portable. C'est agréable de redonner quelque chose à MDN. Quelle grande ressource c'est.
Drew Noakes

Réponses:

352

Dans Firefox, ces fonctions se comportent très différemment: logimprime uniquement une toStringreprésentation, tandis que dirimprime une arborescence navigable.

Dans Chrome, logimprime déjà un arbre - la plupart du temps . Cependant, Chrome logstringifie toujours certaines classes d'objets, même si elles ont des propriétés. L'exemple le plus clair de différence est peut-être une expression régulière:

> console.log(/foo/);
/foo/

> console.dir(/foo/);
* /foo/
    global: false
    ignoreCase: false
    lastIndex: 0
    ...

Vous pouvez également voir une nette différence avec les tableaux (par exemple, console.dir([1,2,3])) qui sont logged différemment des objets normaux:

> console.log([1,2,3])
[1, 2, 3]

> console.dir([1,2,3])
* Array[3]
    0: 1
    1: 2
    2: 3
    length: 3
    * __proto__: Array[0]
        concat: function concat() { [native code] }
        constructor: function Array() { [native code] }
        entries: function entries() { [native code] }
        ...

Les objets DOM présentent également des comportements différents, comme indiqué dans une autre réponse .

absides
la source
11
N'oubliez pas que console.dir conserve une référence à l'objet. Vous ne voudrez probablement pas l'utiliser largement en production. Cela ne fonctionne probablement que si la console est montrée.
Jean-Philippe Leclerc
Dans Chromium 45 sur Ubuntu, il console.logsemble que ce soit la version simplifiée de "Firefox" qui ressemble toStringà un arbre plutôt qu'à un arbre. Je ne sais pas encore quand ils l'ont changé, mais ils l'ont fait.
icedwater
3
@icedwater: dépend de l'ouverture de la console lors de votre appel console.logou de son ouverture ultérieure. Oui vraiment. :-)
TJ Crowder
Vous pouvez également voir une nette différence avec la fonction. En chrome, il imprime le code source de fonction avec console.log, mais avec console.dir, vous pouvez voir les prototype, argumentspropriétés.
Tina Chen
1
Maintenant , il semble que console.loget console.dirrevenir en fait la même représentation [1,2,3]dans Firefox.
xji
151

Une autre différence utile dans Chrome existe lors de l'envoi d'éléments DOM à la console.

Remarquer:

  • console.log imprime l'élément dans une arborescence de type HTML
  • console.dir imprime l'élément dans un arbre de type JSON

Plus précisément, console.logdonne un traitement spécial aux éléments DOM, alors console.dirque non. Cela est souvent utile lorsque vous essayez de voir la représentation complète de l'objet DOM JS.

La référence de l'API de la console Chrome contient plus d'informations sur cette fonction et d'autres.

Drew Noakes
la source
Je crois que ces informations proviennent de developer.mozilla.org/en-US/docs/Web/API/Console/log
loneshark99
11
@ loneshark99 en fait c'est l'inverse. Notez l'URL dans leur capture d'écran? Ils ont copié ma réponse. Mais ça va parce que c'est permis par la licence sur les réponses SO et j'adore MDN de toute façon.
Drew Noakes
Je l'ai compris, c'est ce que je pensais au départ, mais j'ai ensuite pensé pourquoi ils copieraient d'ici. Logique . Bonne information
loneshark99
4

Je pense que Firebug le fait différemment des outils de développement de Chrome. Il semble que Firebug vous donne une version chaîne de l'objet tout enconsole.dir vous donnant un objet extensible. Les deux vous donnent l'objet extensible dans Chrome, et je pense que c'est de là que la confusion pourrait provenir. Ou c'est juste un bug dans Chrome.

Dans Chrome, les deux font la même chose. En développant votre test, j'ai remarqué que Chrome obtient la valeur actuelle de l'objet lorsque vous le développez.

> o = { foo: 1 }
> console.log(o)
Expand now, o.foo = 1
> o.foo = 2
o.foo is still displayed as 1 from previous lines

> o = { foo: 1 }
> console.log(o)
> o.foo = 2
Expand now, o.foo = 2

Vous pouvez utiliser ce qui suit pour obtenir une version chaîne d'un objet si c'est ce que vous voulez voir. Cela vous montrera ce qu'est l'objet au moment où cette ligne est appelée, pas lorsque vous la développez.

console.log(JSON.stringify(o));
sachleen
la source
2

Depuis le site Firebug http://getfirebug.com/logging/

L'appel de console.dir (object) enregistrera une liste interactive des propriétés d'un objet, comme> une version miniature de l'onglet DOM.

Dries Marien
la source
0

En suivant les conseils de Felix Klings, je l'ai essayé dans mon navigateur Chrome.

console.dir([1,2]) donne la sortie suivante:

Array[2]
 0: 1
 1: 2
 length: 2
 __proto__: Array[0]

While console.log([1,2])donne la sortie suivante:

[1, 2]

Je pense donc que cela console.dir()devrait être utilisé pour obtenir plus d'informations comme le prototype, etc. dans les tableaux et les objets.

Bimal
la source
0

Différence entre console.log()et console.dir():

Voici la différence en bref:

  • console.log(input): Le navigateur se connecte de manière bien formatée
  • console.dir(input): Le navigateur enregistre uniquement l'objet avec toutes ses propriétés

Exemple:

Le code suivant:

let obj = {a: 1, b: 2};
let DOMel = document.getElementById('foo');
let arr = [1,2,3];

console.log(DOMel);
console.dir(DOMel);

console.log(obj);
console.dir(obj);

console.log(arr);
console.dir(arr);

Enregistre les éléments suivants dans les outils de développement Google:

entrez la description de l'image ici

Willem van der Veen
la source
0

Aucun des 7 réponses précédentes mentionné que vient console.dirappuyer les arguments supplémentaires : depth, showHiddenet si l'utilisationcolors .

Un intérêt particulier est depth, qui (en théorie) permet de déplacer des objets dans plus que les 2 niveaux par défaut que console.logprend en charge.

J'ai écrit "en théorie" parce qu'en pratique, quand j'avais un objet Mongoose et que je courais console.log(mongoose)et console.dir(mongoose, { depth: null }), la sortie était la même. Ce qui en fait récursifs profondément dans l' mongooseobjet a été à l' aide util.inspect:

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));
Dan Dascalescu
la source