Cómo inspeccionar objetos Javascript

100

¿Cómo puedo inspeccionar un objeto en un cuadro de alerta? Normalmente, alertar a un objeto arroja el nombre de nodo:

alert(document);

Pero quiero obtener las propiedades y métodos del objeto en el cuadro de alerta. ¿Cómo puedo lograr esta funcionalidad, si es posible? ¿O hay otras sugerencias?

En particular, estoy buscando una solución para un entorno de producción donde console.log y Firebug no están disponibles.

Valentina
fuente
9
hacer console.logen
Firefox
1
Estoy confundido. En un entorno de producción, tienes usuarios reales, ¿verdad? Entonces, ¿por qué querría lanzar una alerta con propiedades de objeto? ¿Quizás una mejor solución es serializar el objeto y registrarlo en un archivo o enviar un correo electrónico?
Nathan Long
Tal vez necesite la alerta como herramienta, pero la funcionalidad real para hacer otra cosa. Podría haber todo tipo de razones por las que él / ella podría querer hacer esto, como mostrar estadísticas o una ocurrencia de error, o hacer ambas cosas simplemente pasando un objeto a lo que sea que esté usando para inspeccionar el objeto.
Christian
Relacionado en Node.js: stackoverflow.com/questions/24902061/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
A veces JSON.stringifyes útil.
BrainSlugs83

Respuestas:

56

Los bucles for- inpara cada propiedad en un objeto o matriz. Puede utilizar esta propiedad para obtener el valor y cambiarlo.

Nota: las propiedades privadas no están disponibles para inspección, a menos que use un "espía"; Básicamente, anula el objeto y escribe un código que hace un bucle for-in dentro del contexto del objeto.

Porque en se parece a:

for (var property in object) loop();

Algún código de muestra:

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

Editar: Hace algún tiempo, escribí a mi propio inspector, si está interesado, me complace compartirlo.

Edición 2: Bueno, escribí uno de todos modos.

cristiano
fuente
Debería estar protegido de alguna manera contra la recursividad. ¿Hashes ( diccionarios ) con algunos identificadores internos de renderizador html? Podría ser útil para los novatos introducir esta verificación en el código.
Nakilon
@Nakilon Siempre he tenido problemas con la recursividad infinita, especialmente en PHP. Hay dos formas de solucionar esto: usando un parámetro de profundidad o modificando el hash y agregando su propia propiedad que usa para verificar la recursividad. El de profundidad probablemente sea más seguro.
Christian
Me gusta más esta versión de la línea 7. Se parece un poco más a ruby ​​y tiene un bonito espacio en blanco r.push (i + '"' + p + '" =>' + (t == 'object'? '{\ N' + xinspect (o [p], i + '') + ('\ n' + i + '},'): o [p] + ''));
BC.
2
Ese fragmento de código arruinó por completo Safari Mobile en iPhone. Optaría por la solución JSON.stringify a continuación para una alternativa más segura.
Daniel
1
Esta cosa se estrelló safari, Chrome inspeccionando un objeto, no lo recomendaría.
Keno
194

¿Qué tal alert(JSON.stringify(object))con un navegador moderno?

En el caso de TypeError: Converting circular structure to JSON, aquí hay más opciones: ¿Cómo serializar el nodo DOM a JSON incluso si hay referencias circulares?

La documentación: JSON.stringify()proporciona información sobre cómo formatear o embellecer la salida.

Torsten Becker
fuente
+1 Buena sugerencia. Agregaría que podría usar jsonview ( jsonviewer.stack.hu ) para verlo bien.
Christian
2
Si también quisiera tener un buen formato, puede llamar a:, alert(JSON.stringify(object, null, 4)donde 4es el número de espacios utilizados para la sangría.
Jan Molak
Esto me da 'indefinido' como salida. Estoy intentando depurar pruebas de karma.
Alex C
1
Hay salvedades en este enfoque. OP dice que quiere inspeccionar los métodos del objeto. stringify no se mostrará métodos: JSON.stringify({f: ()=>{}}) => "{}". Además, si la implementa el objeto toJSONmétodo se obtiene lo que devuelve el método, que es inútil si desea examinar el objeto: JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'.
Morozov
39

Usar console.dir(object)y el complemento Firebug

Ranjeet
fuente
4
Esto me dio la información más completa y útil para lo que buscaba. Gracias.
Shon
2
No estaba al tanto de la console.dirfunción. No pude entender por qué ya no podía ver el objeto completo en Firebug. Esto ahora me lo ha arreglado. ¡Gracias!
Andrew Newby
Necesito saber si hay otras ventajas de esto console.logademás de la conveniencia de visualización, por favor
user10089632
17

Hay algunos métodos:

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty) 

En un contexto de consola, a veces el .constructor o .prototype puede ser útil:

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ; 
brotherol
fuente
17

Usa tu consola:

console.log(object);

O si está inspeccionando elementos html dom, use console.dir (objeto). Ejemplo:

let element = document.getElementById('alertBoxContainer');
console.dir(element);

O si tiene una matriz de objetos js, puede usar:

console.table(objectArr);

Si está generando una gran cantidad de console.log (objetos), también puede escribir

console.log({ objectName1 });
console.log({ objectName2 });

Esto le ayudará a etiquetar los objetos escritos en la consola.

Richard Torcato
fuente
Esos valores mostrados cambian de forma dinámica, en tiempo real, que puede ser engañoso para los propósitos de depuración
user10089632
en Chrome, use las preferencias de su consola y haga clic en conservar registro. Ahora, incluso si su secuencia de comandos lo redirige a otra página, su consola no se borra.
Richard Torcato
Parece que este problema está relacionado con Firefox porque en Chrome, a menos que esté en console.log (), los valores mostrados siguen siendo. Puede sugerir que se cambie a Chrome, pero a veces está probando la disponibilidad de las funciones del navegador. De todas formas gracias por el dato que puede ser de utilidad.
user10089632
No puedo usarlo consoleporque estoy usando el estilo stackoverflow.com/q/7505623/1480391 y no es compatible
Yves M.
9
var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);
moe
fuente
¿Cómo lo hace console.log ()? :)
Christian
utilice Firefox o Chrome. Obtén Firebug para Firefox. imprescindible
moe
Estaba siendo sarcástico. El OP solicitó específicamente el código JS y, a menos que esté sugiriendo que profundice en firebug / fox / chrome, no sé dónde encontrará una respuesta.
Christian
6

Esta es una flagrante estafa de la excelente respuesta de Christian. Lo acabo de hacer un poco más legible:

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector
vaFyreHeart
fuente
4

Aquí está mi inspector de objetos que es más legible. Debido a que el código tarda mucho en escribir aquí, puede descargarlo en http://etto-aa-js.googlecode.com/svn/trunk/inspector.js

Use así:

document.write(inspect(object));
Muhammad Eko Avianto
fuente
2
Ese suele ser el caso (y definitivamente es la guía oficial, no publique enlaces), OTOH, para algo que tiene una versión así, puede ser algo agradable, ya que sabe que siempre estará mirando el el último código, y no algo obsoleto que se publicó hace años y que podría no funcionar más ... - Además, ese enorme bloque de código se vería bastante mal pegado en una pared de texto ASÍ que responda ... - Fuera de tema: Sería bueno si hubiera una forma en SO de tener etiquetas similares a "spoiler" para el código y poder vincularlo a una fuente externa y actualizarlo automáticamente (cuando sea posible),
BrainSlugs83