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

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?

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 .

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.

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

Utilisez console.dir () pour sortir 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?

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.

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.

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:

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