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

Question

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

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

J'ai lu quelque part en ligne, dir prend une copie de l'objet avant l'enregistrement, alors que d' log transmet simplement la référence de la console, ce qui signifie que par le temps que vous passez à inspecter l'objet connecté, elle 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 potentiellement en montrant des objets dans les différents états que lorsqu'ils ont été enregistrés.

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

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

Maintenant, développez l' [Object] sous l'instruction de journal et notez qu'il montre foo avec une valeur de 2. La même chose est vraie si vous répétez l'expérience à l'aide d' dir au lieu de log.

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

Answer 1

Dans Firefox, ces fonctions se comportent tout à fait différemment: log seulement imprime toString de la représentation, alors qu' dir affiche un arbre navigable.

Dans Chrome, log déjà imprime un arbre -- la plupart du temps. Toutefois, google Chrome, log encore stringifies primitives, même si elles ont des propriétés. Peut-être l'exemple le plus clair d'une différence est 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.

Answer 2

Une autre différence dans Chrome existe lors de l'envoi des éléments du DOM de la console.

Avis:

• console.log imprime l'élément HTML-comme un arbre
• console.dir imprime l'élément dans un JSON-comme un arbre

Plus précisément, console.log donne un traitement spécial aux éléments du DOM, alors qu' console.dir ne le sont pas. C'est souvent utile lorsque vous essayez pour voir la représentation du DOM en JS objet.

Il n'y a plus d'informations dans la Console Chromée référence de l'API à ce sujet et d'autres fonctions.

Answer 3

Je pense que Firebug t-il différemment de google Chrome dev tools. Il ressemble à Firebug vous donne un stringified version de l'objet lors de l' console.dir vous donne un objet extensible. Les deux de vous donner l'objet extensible dans google Chrome, et je pense que c'est là que la confusion vient peut-être de. Ou c'est juste un bug dans Chrome.

Dans Chrome, les deux font la même chose. L'extension de votre test, j'ai remarqué que Chrome obtient la valeur actuelle de l'objet lorsque vous les 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 un stringified version d'un objet si c'est ce que vous voulez voir. Cela va vous montrer ce que l'objet est à la fois cette ligne est appelée, non pas quand vous les développez.

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

Answer 4

Utilisez console.dir() pour copier un objet parcourir-able que vous pouvez cliquer pour accéder au lieu de la version .toString(), comme ceci :

L’affichage d’objet complet dans la console de Chrome ?

Answer 5

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

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