javascript - errores - developer tools google
¿Cuál es la diferencia entre console.dir y console.log? (6)
Creo que Firebug lo hace de manera diferente a las herramientas de desarrollo de Chrome. Parece que Firebug le ofrece una versión de cadena del objeto, mientras que console.dir le ofrece un objeto ampliable. Ambos te dan el objeto expandible en Chrome, y creo que de ahí viene la confusión. O es solo un error en Chrome.
En Chrome, ambos hacen lo mismo. Al ampliar 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 stringificada de un objeto si eso es lo que quiere ver. Esto le mostrará cuál es el objeto en el momento en que se llama a esta línea, no cuando lo expanda.
console.log(JSON.stringify(o));
En Chrome, el objeto de la console define dos métodos que parecen hacer lo mismo:
console.log(...)
console.dir(...)
Leí en algún lugar en línea que el dir toma una copia del objeto antes de registrarlo, mientras que el log simplemente pasa la referencia a la consola, lo que significa que para cuando inspeccione el objeto que ha registrado, 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 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 muestra foo con un valor de 2. Lo mismo es cierto si repite el experimento usando dir lugar de log .
Mi pregunta es, ¿por qué existen estas dos funciones aparentemente idénticas en la console ?
Desde el sitio de firebug http://getfirebug.com/logging/
Al llamar a console.dir (objeto) se registrará una lista interactiva de las propiedades de un objeto, como> una versión en miniatura de la pestaña DOM.
En Firefox, esta función se comporta de manera muy diferente: el log solo imprime una representación toString , mientras que dir imprime un árbol navegable.
En Chrome, log ya imprime un árbol, la mayoría de las veces . Sin embargo, el log de Chrome aún clasifica 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 se log 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ñala en otra respuesta .
Otra diferencia útil en Chrome existe cuando se envían elementos DOM a la consola.
Darse cuenta:
-
console.logimprime el elemento en un árbol similar a HTML -
console.dirimprime el elemento en un árbol similar a JSON
Específicamente, console.log proporciona un tratamiento especial a los elementos DOM, mientras que console.dir no lo hace. Esto suele ser útil cuando se intenta 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.
Siguiendo los consejos de Felix Klings, lo probé en mi navegador 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.
Use console.dir () para generar un objeto con capacidad de exploración en el que pueda hacer clic en lugar de la versión .toString (), como esto:
console.dir(obj/this/anything)