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

En Chrome les console objet définit deux méthodes qui semblent faire la même chose:

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

J'ai lu quelque part sur internet que l' dir prend une copie de l'objet avant l'enregistrement, alors que 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 la console Chromée (Ctrl+Maj+J) pour voir ce que je veux dire:

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

Maintenant, développez le [Object] sous la 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 de dir au lieu de log.

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

Essayez console.log([1,2]) et console.dir([1,2]) et vous verrez la différence.
Dans firebug le contenu d'un objet connecté avec console.dir ne change pas, donc cela fait une grande différence.
Attention à console.dir() : cette fonction n'est non-standard ! Donc, ne pas l'utiliser sur la production 😉
Cette question de l'URL indiqué dans le image Mozilla Developer Network - Console.journal (le) - Différence avec la console.dir().
jolie trouvaille! En fait, l'image est à partir de ma réponse ci-dessous, si c'était fait capturé sur mon ordinateur portable. C'est gentil de donner quelque chose en retour à la SOCIÉTÉ. Quelle grande ressource qu'il est.

OriginalL'auteur Drew Noakes | 2012-08-14

  1. 313

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

    En Chrome, log déjà imprime un arbre -- la plupart du temps. Toutefois, google Chrome, log encore stringifies certaines classes d'objets, 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:

    > 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 différences, comme l'a noté sur une autre réponse.

    N'oubliez pas que la console.dir maintient une référence vers l'objet. Vous ne voulez probablement pas de beaucoup l'utiliser en production. Probablement qu'elle ne fonctionne que si la console est montré tho.
    Dans Chrome 45 sur Ubuntu, console.log semble être la simplification, "Firefox", version qui ressemble à un toString plutôt qu'un arbre. Je ne sais pas encore quand ils l'ont changé, mais ils l'ont fait.
    Dépend si vous avez la console ouverte lorsque vous appelez console.log ou de l'ouvrir plus tard. Oui, vraiment. 🙂
    Vous pouvez également voir une nette différence avec la Fonction. Dans google chrome, il sera de la Fonction d'impression de code source avec console.log, mais avec console.dir, vous pouvez voir l' prototype, arguments propriétés.
    Maintenant, il semble que console.log et console.dir fait retour la même représentation sur [1,2,3] dans Firefox.

    OriginalL'auteur apsillers

  2. 132

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

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

    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 accorde un traitement spécial aux éléments du DOM, alors que console.dir ne le fait 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 le Console chromée référence de l'API à ce sujet et d'autres fonctions.

    Je crois que cette information est à partir de developer.mozilla.org/en-US/docs/Web/API/Console/log
    en fait c'est l'inverse. Avis de l'URL dans leur capture d'écran? Ils ont copié ma réponse. Mais c'est bien parce que c'est autorisé par la licence sur tant de réponses et j'aime MDN de toute façon.
    Il a obtenu , c'est ce que j'ai d'abord été pensée, mais alors pensé pourquoi ils ne copie à partir d'ici. Du sens . De bonnes informations
    Il faut se sentir bien, quand mdn copies de votre réponse..

    OriginalL'auteur Drew Noakes

  3. 4

    Je pense que Firebug t-il différemment de google Chrome dev tools. Il ressemble à Firebug vous donne un stringified version de l'objet alors que 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.

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

    OriginalL'auteur sachleen

  4. 3

    Utiliser la console.dir() pour la sortie de navigation capable d'objet, vous pouvez cliquer à travers à la place de la .toString() de la version, comme ceci:

    console.dir(obj/this/anything)

    Comment montrer plein d'objet en Chrome de la console?

    OriginalL'auteur Scorpion-Prince

  5. 2

    À partir du site firebug
    http://getfirebug.com/logging/

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

    OriginalL'auteur Dries Marien

  6. 0

    Suivantes Felix Klings conseils j'ai essayé dans mon navigateur google chrome.

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

    Tableau[2]

    0: 1

    1: 2

    longueur: 2

    _proto_: Array[0]

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

    [1, 2]

    Je crois donc que la console.dir() doit être utilisée pour obtenir plus d'informations, comme prototype, etc dans les tableaux et les objets.

    OriginalL'auteur Bimal