¿Cuál es la diferencia entre console.dir y console.log?

Question

En Chrome el objeto console define dos métodos que parecen hacer lo mismo:

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

He leído en alguna línea que dir toma una copia del objeto antes de iniciar la misma, mientras que log simplemente pasa la referencia a la consola , lo que significa que para el momento en que vaya a inspeccionar el objeto que inició sesión, puede haber cambiado. Sin embargo, algunas pruebas preliminares sugieren que no hay diferencia y que ambos muestran potencialmente objetos en diferentes estados que cuando se registraron.

Prueba esto en la consola de cromo (Ctrl + Shift + J) para ver lo que quiero decir:

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

Ahora, expanda el [Object] debajo de la declaración de registro y observe que se muestra foo con un valor de 2. Lo mismo es cierto si repite el experimento usando dir en lugar de log.

Mi pregunta es, ¿por qué existen estas dos funciones aparentemente idénticas en console?

Answer 1

En Firefox, estas funciones se comportan de manera muy diferente: log sólo se imprime una representación toString, mientras que dir impresiones de un árbol navegable.

En Chrome, log ya imprime un árbol - la mayoría del tiempo. Sin embargo, Chrome log todavía stringified ciertas clases de objetos, incluso si tienen propiedades.Quizás el ejemplo más claro de una diferencia es una expresión regular:

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

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

también se puede ver una clara diferencia con matrices (por ejemplo, console.dir([1,2,3])) que están log GED diferente de objetos normales:

> 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] } 
     ... 

DOM los objetos también muestran un comportamiento diferente, as noted on another answer.

Answer 2

Desde el sitio firebug http://getfirebug.com/logging/

Calling console.dir (objeto) registrará un anuncio interactivo de propiedades de un objeto, como> una versión en miniatura de la pestaña DOM.

Answer 3

Uso console.dir() a la salida de un objeto navegable de que se puede hacer clic a través lugar de la versión .toString(), así:

console.dir(obj/this/anything) 

How to show full object in Chrome console?

Answer 4

Creo Firebug lo hace de manera diferente a las herramientas de desarrollo de Chrome. Parece que Firebug te da una versión del objeto en forma de cadena mientras que console.dir te da un objeto expandible. Ambos te dan el objeto expandible en Chrome, y creo que de ahí viene la confusión. O solo es un error en Chrome.

En Chrome, ambos hacen lo mismo. Ampliando su prueba, he notado que Chrome obtiene el valor actual del objeto cuando lo expande.

> 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 

Puede usar lo siguiente para obtener una versión codificada de un objeto si eso es lo que desea ver. Esto le mostrará qué es el objeto en el momento en que se llama a esta línea, no cuando la expande.

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

Answer 5

Siguiendo los consejos de Felix Klings Lo probé en mi navegador de Chrome.

console.dir ([1,2]) da el siguiente resultado:

Array [2]

0: 1

1: 2

longitud: 2

_ proto _: Array [0]

Mientras console.log ([1,2]) da el siguiente resultado:

[1, 2]

Así que creo que console.dir() debería usarse para obtener más información como prototipos, etc. en matrices y objetos.

Answer 6

Existe otra diferencia útil en Chrome al enviar elementos DOM a la consola.

Aviso:

• console.log imprime el elemento en un árbol en HTML, como
• console.dir imprime el elemento en un árbol JSON-como

Específicamente, console.log da tratamiento especial para los elementos DOM, mientras que console.dir no lo hace. Esto a menudo es útil cuando se trata de ver la representación completa del objeto DOM JS.

Hay más información en el Chrome Console API reference acerca de esta y otras funciones.