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

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?

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 .

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.

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

Use console.dir () para generar un objeto explorable en el que puede hacer clic en lugar de la versión .toString (), de esta manera:

console.dir(obj/this/anything)

¿Cómo mostrar el objeto completo en la consola de Chrome?

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.

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.

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:

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