web-dev-qa-db-fra.com

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

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

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

J'ai lu quelque part en ligne que dir prend une copie de l'objet avant de le consigner, alors que log ne fait que transmettre la référence à la console, ce qui signifie qu'au moment où vous allez inspecter l'objet que vous avez enregistré, il peut ont 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 où ils ont été connecté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

Développez maintenant le [Object] sous l'instruction de journal et notez qu'il indique foo avec la valeur 2. Il en va de même si vous répétez l'expérience en utilisant dir au lieu de log.

Ma question est la suivante: pourquoi ces deux fonctions apparemment identiques existent-elles sur console?

javascriptgoogle-chromeconsole
329
Drew Noakes

Dans Firefox, ces fonctions se comportent différemment: log n’imprime qu’une représentation toString, alors que dir imprime un arbre de navigation.

Dans Chrome, log imprime déjà un arbre - la plupart du temps . Cependant, la variable log de Chrome continue de définir certaines classes d'objets, même si elles ont des propriétés. L’exemple le plus clair d’une 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 un comportement différent, comme indiqué dans une autre réponse .

332
apsillers

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 une arborescence de type JSON

Plus précisément, console.log accorde un traitement spécial aux éléments DOM, alors que console.dir ne le fait pas. Cela est souvent utile lorsque vous essayez de voir la représentation complète de l'objet DOM JS.

Vous trouverez plus d'informations dans référence de l'API de console Chrome à propos de cette fonction et d'autres.

137
Drew Noakes

Je pense que Firebug le fait différemment des outils de développement de Chrome. Il semble que Firebug vous fournisse une version de l’objet avec une chaîne alors que console.dir vous donne un objet extensible. Les deux vous donnent l'objet extensible dans Chrome, et je pense que c'est de là que pourrait provenir la confusion. 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 stringifiée d'un objet si c'est ce que vous voulez voir. Cela vous montrera quel est l'objet au moment où cette ligne est appelée, pas quand vous le développez.

console.log(JSON.stringify(o));
4
sachleen

Utilisez console.dir () pour générer un objet parcourable sur lequel vous pouvez cliquer au lieu de la version .toString (), comme ceci:

console.dir(obj/this/anything)

Comment afficher l'objet complet dans la console Chrome??

3
Scorpion-Prince

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

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

2
Dries Marien

Suivant les conseils de Felix Klings, je l’ai essayé dans mon navigateur chrome.

console.dir ([1,2]) donne le résultat suivant:

Tableau [2]

: 1

1: 2

longueur: 2

_ proto _: Tableau [0]

While console.log ([1,2]) donne le résultat suivant:

[1, 2]

Je pense donc que console.dir () devrait être utilisé pour obtenir plus d’informations telles que les prototypes, etc., dans les tableaux et les objets.

0
Bimal