Utiliza el JSON.stringify
método nativo . Funciona con objetos anidados y todos los principales navegadores admiten este método.
str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()
Enlace a Mozilla API Reference y otros ejemplos.
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
Use un reemplazador JSON.stringify personalizado si encuentra este error de Javascript
"Uncaught TypeError: Converting circular structure to JSON"
Sandeep
fuente
fuente
console.log
es decirconsole.log(JSON.stringify(obj,null, 4));
{}
para un objeto no vacío. Así que asegúrese de consultarconsole.log(obj)
antes de pensar que su objeto está vacío cuandostrigify()
regrese{}
.Respuestas:
fuente
console.dir(object)
:Tenga en cuenta que la
console.dir()
función no es estándar. Ver documentos web de MDNfuente
console.dir
es que aún puede expandir y leer los valores en su consola después de que la variable haya sido recolectada de basura. Esto se describe en otro artículo de SO aquíconsole.dir
es que cuando guarda la consola en un archivo, todas las propiedades están en el archivo como se esperaba. Eso no sucede cuando se usa console.log únicamente.prueba esto :
Esto imprimirá la versión stringify del objeto. Entonces, en lugar de
[object]
como salida, obtendrá el contenido del objeto.fuente
typeerror: Converting circular structure to JSON
?Bueno, Firefox (gracias a @Bojangles por información detallada) tiene un
Object.toSource()
método que imprime objetos como JSON yfunction(){}
.Eso es suficiente para la mayoría de los propósitos de depuración, supongo.
fuente
.toSource()
en realidad es solo Firefox . Solo pensé que te lo haría saber.Si desea utilizar la alerta, para imprimir su objeto, puede hacer esto:
alert("myObject is " + myObject.toSource());
Debe imprimir cada propiedad y su valor correspondiente en formato de cadena.
fuente
Si desea ver los datos en formato tabular, puede usar
La tabla se puede ordenar si hace clic en la columna de la tabla.
También puede seleccionar qué columnas mostrar:
Puede encontrar más información sobre console.table aquí
fuente
En NodeJS puede imprimir un objeto utilizando
util.inspect(obj)
. Asegúrese de indicar la profundidad o solo tendrá una impresión superficial del objeto.fuente
Función:
Uso:
Ejemplo:
http://jsfiddle.net/WilsonPage/6eqMn/
fuente
Simplemente use
Ejemplo
O
Además, tenga en cuenta que las funciones de JavaScript se consideran objetos.
Como nota extra:
En realidad, puede asignar nuevas propiedades como esta y acceder a console.log o mostrarla en alerta
fuente
Utilizar este:
fuente
Como se dijo antes, la mejor y más simple forma en que encontré fue
fuente
navigator
.Para imprimir el objeto completo con Node.js con colores como bonificación:
Los colores son, por supuesto, opcionales, 'profundidad: nulo' imprimirá el objeto completo.
Las opciones no parecen ser compatibles con los navegadores.
Referencias
https://developer.mozilla.org/en-US/docs/Web/API/Console/dir
https://nodejs.org/api/console.html#console_console_dir_obj_options
fuente
NB: en estos ejemplos, yourObj define el objeto que desea examinar.
Primero, mi forma menos favorita pero más utilizada de mostrar un objeto:
Esta es la forma de facto de mostrar el contenido de un objeto
producirá algo como:
Creo que la mejor solución es mirar a través de las Teclas de Objetos, y luego a través de los Valores de Objetos si realmente quieres ver qué contiene el objeto ...
Producirá algo como: (foto arriba: las claves / valores almacenados en el objeto)
También existe esta nueva opción si está utilizando ECMAScript 2016 o posterior:
Esto producirá una salida ordenada: la solución mencionada en una respuesta anterior:
console.log(yourObj)
muestra demasiados parámetros y no es la forma más fácil de usar para mostrar los datos que desea . Es por eso que recomiendo registrar claves y luego valores por separado.Siguiente:
Alguien en un comentario anterior sugirió este, sin embargo, nunca funcionó para mí. Si funciona para otra persona en un navegador diferente o algo así, ¡felicitaciones! ¡Todavía pondré el código aquí como referencia! Producirá algo como esto en la consola:
fuente
console.table(yourObj)
funcionó para mí en Google Chrome versión 77.0.3865.90 (compilación oficial) (64 bits). ¡Gracias por compartir!(Esto se ha agregado a mi biblioteca en GitHub )
¡Reinventando la rueda aquí! Ninguna de estas soluciones funcionó para mi situación. Entonces, rápidamente modifiqué la respuesta de wilsonpage . Este no es para imprimir en la pantalla (a través de la consola, o campo de texto o lo que sea). Funciona bien en esas situaciones y funciona tan bien como lo solicitó el OP
alert
. Muchas respuestas aquí no abordan el usoalert
como lo solicitó el OP. De todos modos, sin embargo, está formateado para el transporte de datos. Esta versión parece devolver un resultado muy similar altoSource()
. No lo he probadoJSON.stringify
, pero supongo que esto es casi lo mismo. Esta versión es más como un poly-fil para que pueda usarlo en cualquier entorno. El resultado de esta función es una declaración de objeto Javascript válida.No dudaría si algo así ya estaba en SO en alguna parte, pero fue más corto hacerlo que pasar un tiempo buscando respuestas pasadas. Y dado que esta pregunta fue mi mayor éxito en Google cuando comencé a buscar sobre esto; Pensé que ponerlo aquí podría ayudar a otros.
De todos modos, el resultado de esta función será una representación de cadena de su objeto, incluso si su objeto tiene objetos y matrices incrustados, e incluso si esos objetos o matrices tienen aún más objetos y matrices incrustados. (¿Te escuché que te gusta beber? Así que le piminé a tu auto con un enfriador. Y luego, pimé tu enfriador con un enfriador. Por lo tanto, tu enfriador puede beber, mientras tú eres frío).
Las matrices se almacenan en
[]
lugar de{}
y, por lo tanto, no tienen pares clave / valor, solo valores. Al igual que las matrices regulares. Por lo tanto, se crean como lo hacen las matrices.Además, se citan todas las cadenas (incluidos los nombres de las teclas), esto no es necesario a menos que esas cadenas tengan caracteres especiales (como un espacio o una barra inclinada). Pero, no tenía ganas de detectar esto solo para eliminar algunas citas que de otro modo funcionarían bien.
Esta cadena resultante se puede usar con
eval
o simplemente volcarla en una manipulación de var a través de cadena. Por lo tanto, volver a crear su objeto nuevamente, a partir del texto.Avíseme si lo arruiné todo, funciona bien en mis pruebas. Además, la única forma en que podía pensar para detectar el tipo
array
era verificar la presencia delength
. Debido a que Javascript realmente almacena matrices como objetos, en realidad no puedo verificar el tipoarray
(¡no existe ese tipo!). Si alguien más conoce una mejor manera, me encantaría escucharla. Porque, si su objeto también tiene una propiedad llamadalength
, esta función lo tratará erróneamente como una matriz.EDITAR: Se agregó verificación para objetos con valor nulo. Gracias Brock Adams
EDITAR: A continuación se muestra la función fija para poder imprimir objetos infinitamente recursivos. Esto no imprime lo mismo que
toSource
desde FF porquetoSource
imprimirá la recursión infinita una vez, mientras que esta función la matará de inmediato. Esta función se ejecuta más lentamente que la anterior, así que la agrego aquí en lugar de editar la función anterior, ya que solo es necesaria si planea pasar objetos que se vinculan a sí mismos, en algún lugar.Prueba:
Resultado:
NOTA: Intentar imprimir
document.body
es un ejemplo terrible. Por un lado, FF simplemente imprime una cadena de objeto vacía cuando se usatoSource
. Y cuando se usa la función anterior, FF se bloqueaSecurityError: The operation is insecure.
. Y Chrome se bloquearáUncaught RangeError: Maximum call stack size exceeded
. Claramente,document.body
no estaba destinado a convertirse en cadena. Porque es demasiado grande o contra la política de seguridad para acceder a ciertas propiedades. A menos que haya estropeado algo aquí, ¡cuéntalo!fuente
ObjToSource(document.body)
, por ejemplo.ObjToSource(document.body)
debido a la recursión infinita. Inclusodocument.body.toSource()
en Firefox devuelve un objeto vacío.document.body
todavía no se puede imprimir. Ver nota.document.body
fue solo un atajo para señalar algunos grandes problemas. Ya has arreglado lo peor de eso y ya he votado. (Aunque, creo que podría manejar un enfoque diferentedocument.body
. La mayoría de las respuestas aquí tampoco funcionarían bien en su contra).Si desea imprimir el objeto completo, puede usar
Si desea imprimir el objeto convirtiéndolo en la cadena, entonces
fuente
JSON.stringify
cuando intente concatenar con un objeto de cadena. Si lo usaconsole.log(object)
, debería imprimir bastante el contenido del objetoAquí hay una manera de hacerlo:
fuente
Necesitaba una forma de imprimir recursivamente el objeto, que la respuesta de pagewil proporcionó (¡Gracias!). Lo actualicé un poco para incluir una forma de imprimir hasta cierto nivel y agregar espacios para que esté correctamente sangrado en función del nivel actual en el que nos encontramos para que sea más legible.
Uso:
fuente
Yo siempre uso
console.log("object will be: ", obj, obj1)
. de esta manera no necesito hacer la solución con stringify con JSON. Todas las propiedades del objeto se expandirán muy bien.fuente
Otra forma de mostrar objetos dentro de la consola es con
JSON.stringify
. Mira el siguiente ejemplo:fuente
Función Javascript
Objeto de impresión
a través de print_r en Javascript
fuente
dónde
object
esta tu objetoo puede usar esto en las herramientas de desarrollo de Chrome, pestaña "consola":
console.log(object);
fuente
console.log(Object.keys(object));
aunque sé que solo imprime las claves de propiedades, es suficiente para mí para mis propósitos;)Asumir objeto
obj = {0:'John', 1:'Foo', 2:'Bar'}
Imprimir el contenido del objeto
Salida de consola (Chrome DevTools):
¡Espero que ayude!
fuente
Prefiero usar
console.table
para obtener un formato de objeto claro, así que imagina que tienes este objeto:Y verá una tabla ordenada y legible como esta a continuación:
fuente
Una pequeña función auxiliar que siempre uso en mis proyectos para una depuración simple y rápida a través de la consola. Inspiración tomada de Laravel.
Uso
dd(123.55);
salidas:fuente
También puede usar el concepto literal de plantilla ES6 para mostrar el contenido de un objeto JavaScript en un formato de cadena.
fuente
Utilicé el método de impresión de pagewil, y funcionó muy bien.
Aquí está mi versión ligeramente extendida con sangrías (descuidadas) y distintos delimitadores de prop / ob:
fuente
Otra modificación del código de pagewils ... el suyo no imprime nada más que cadenas y deja el número y los campos booleanos en blanco y arreglé el error tipográfico en el segundo tipo de dentro de la función creada por megaboss.
fuente
Aquí está la función.
Puede mostrar objetos usando sangría de tabulación con legibilidad.
fuente