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

357

En Chrome, el consoleobjeto define dos métodos que parecen hacer lo mismo:

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

Leí en algún lugar en línea que dirtoma una copia del objeto antes de registrarlo, mientras que logsolo pasa la referencia a la consola, lo que significa que para cuando inspeccione el objeto que registró, puede haber cambiado. Sin embargo, algunas pruebas preliminares sugieren que no hay diferencia y que ambos sufren la posibilidad de mostrar objetos en diferentes estados que cuando se registraron.

Prueba esto en la consola de Chrome ( Ctrl+ Shift+ J) para ver a qué me refiero:

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

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

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

Drew Noakes
fuente
65
Intenta console.log([1,2])y console.dir([1,2])verás la diferencia.
Felix Kling
En firebug, el contenido de un objeto registrado console.dirno cambia, por lo que hace una gran diferencia.
Eugene Yarmash
3
Tenga cuidado con console.dir(): ¡esta característica no es estándar ! Así que no lo use en producción;)
fred727
2
La URL de esta pregunta se muestra en la imagen en Mozilla Developer Network - Console.log () - Diferencia con console.dir () .
user7393973
1
@ user7393973 buen hallazgo! En realidad, la imagen es de mi respuesta a continuación, por lo que en realidad fue capturada en mi computadora portátil. Es bueno devolverle algo a MDN. Qué gran recurso es.
Drew Noakes

Respuestas:

352

En Firefox, estas funciones se comportan de manera bastante diferente: logsolo imprime una toStringrepresentación, mientras que dirimprime un árbol navegable.

En Chrome, logya imprime un árbol, la mayoría de las veces . Sin embargo, Chrome logaún encadena 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 puede ver una clara diferencia con las matrices (por ejemplo, console.dir([1,2,3])) que están logged de manera diferente a los 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] }
        ...

Los objetos DOM también exhiben un comportamiento diferente, como se señaló en otra respuesta .

apsillers
fuente
11
No olvide que console.dir mantiene una referencia al objeto. Probablemente no quiera usarlo ampliamente en la producción. Probablemente solo funcione si la consola se muestra aunque.
Jean-Philippe Leclerc
En Chromium 45 en Ubuntu, console.logparece ser la versión simplificada de "Firefox" que se parece toStringmás a un árbol que a un árbol. Todavía no estoy seguro de cuándo lo cambiaron, pero lo hicieron.
agua helada
3
@icedwater: depende de si tiene la consola abierta cuando llama console.logo si la abre más tarde. Sí, en serio. :-)
TJ Crowder
También puede ver una clara diferencia con la función. En cromo, se imprimirá el código fuente con la función console.log, pero con console.dir, se puede ver las prototype, argumentspropiedades.
Tina Chen
1
Ahora parece eso console.logy en console.dirrealidad devuelve la misma representación [1,2,3]en Firefox.
xji
151

Existe otra diferencia útil en Chrome cuando se envían elementos DOM a la consola.

Aviso:

  • console.log imprime el elemento en un árbol similar a HTML
  • console.dir imprime el elemento en un árbol similar a JSON

Específicamente, console.logda un tratamiento especial a los elementos DOM, mientras console.dirque no. Esto suele ser útil cuando se trata de ver la representación completa del objeto DOM JS.

Hay más información en la referencia de la API de Chrome Console sobre esta y otras funciones.

Drew Noakes
fuente
Creo que esta información es de developer.mozilla.org/en-US/docs/Web/API/Console/log
loneshark99
11
@ loneshark99 en realidad es al revés. ¿Ves la URL en su captura de pantalla? Copiaron mi respuesta. Pero eso está bien porque está permitido por la licencia de respuestas SO y de todos modos me encanta MDN.
Drew Noakes
Entendido, eso es lo que estaba pensando inicialmente, pero luego pensé por qué copiarían desde aquí. Tiene sentido . Buena información
loneshark99
4

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

En Chrome, ambos hacen lo mismo. Al ampliar su prueba, noté 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 en cadena de un objeto si eso es lo que desea ver. Esto le mostrará cuál es el objeto en el momento en que se llama esta línea, no cuando la expande.

console.log(JSON.stringify(o));
Sachleen
fuente
2

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

Llamar a console.dir (objeto) registrará una lista interactiva de las propiedades de un objeto, como> una versión en miniatura de la pestaña DOM.

Dries Marien
fuente
0

Siguiendo el consejo de Felix Klings, lo probé en mi navegador Chrome.

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

Array[2]
 0: 1
 1: 2
 length: 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.

Bimal
fuente
0

Diferencia entre console.log()y console.dir():

Aquí está la diferencia en pocas palabras:

  • console.log(input): El navegador registra de forma muy bien formateada
  • console.dir(input): El navegador registra solo el objeto con todas sus propiedades

Ejemplo:

El siguiente código:

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

Registra lo siguiente en las herramientas de desarrollo de Google:

ingrese la descripción de la imagen aquí

Willem van der Veen
fuente
0

Ninguna de las respuestas anteriores 7 menciona que console.dirapoya los argumentos adicionales : depth, showHiddeny si va a utilizar colors.

De particular interés es depth, que (en teoría) permite atravesar objetos en más de los 2 niveles predeterminados que console.logadmite.

Escribí "en teoría" porque en la práctica cuando tenía un objeto Mongoose y corría console.log(mongoose)y console.dir(mongoose, { depth: null }), el resultado era el mismo. Lo que realmente recursó profundamente en el mongooseobjeto fue usar util.inspect:

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));
Dan Dascalescu
fuente