2010-12-29 5 views
25

Estoy depurando mi aplicación web en Firefox, Chrome e Internet Explorer. Con este último, estoy usando Developer Tools para depurar mis scripts.Mostrar objetos en la consola de Herramientas de desarrollo de IE

El problema que estoy teniendo es que cuando escribo alguna expresión en la ventana de la consola y debe devolver un objeto todo lo que puedo ver es un simple {...} que no es realmente útil.

Es posible hacer que funcione de manera similar a la consola Firebug o Chrome que realmente muestra el contenido del objeto. Chrome es el mejor en este sentido, porque puede atravesar directamente el objeto completo como en Visual Studio.

De todos modos. ¿Es posible hacer que la consola de IE Developer Tools muestre las propiedades de los objetos y sus valores?

+1

La única forma en que puedo ver las propiedades de un objeto de interés, configuro un punto de interrupción en la línea apropiada y uso la ventana * Watch * –

+2

@goreSplatter: Eso está bien si desea inspeccionar algo en el código . Pero ejecuto código arbitrario en la consola que no es realmente parte de mi script ... Algo tan simple como: 'window.JSON.parse ('{" d ":" 2010-01-01T12: 34: 56Z "," i " : 123} '); 'y todo lo que obtengo como resultado es simplemente' {...} 'que es ** realmente ** útil. Gracias Microsoft. –

+5

-1 IE Developer Tools –

Respuesta

4

Si el Prototype API es una opción, puede depurar sus objetos de esta manera:

var obj = window.JSON.parse('{"d":"2010-01-01T12:34:56Z","i":123}'); 
alert($H(obj).inspect()); 

Aparte de eso, no conozco ninguna otra forma de no obtener el muy útil{...}.

+0

Desafortunadamente no estoy usando Prototype. jQuery es mi * taza de té * ... –

+0

@Robert Koritnik: Gracias por aceptar. ¿Has encontrado una forma de depurar objetos usando jQuery? –

+0

@goreSplatter: Bueno, su solución con Prototype no funciona para mí ... Pero su respuesta * ... No sé de otra manera ... * es la que acepté como la respuesta correcta. Porque probablemente no haya ninguna solución para esto. No sé por qué una herramienta de desarrollador no ofrece esa funcionalidad básica. –

7

To explore an object's properties and values in IE primero deberá:

  • tienen un conjunto de punto de interrupción (o la depuración de scripts habilitado)
  • Gatillo el punto de interrupción (o se produzca un error)

Los locales pestaña tiene las propiedades y los detalles disponibles localmente en el momento en que se activó el punto de interrupción Agregando un nombre de objeto a la pestañareloj puede ver las propiedades y los detalles del objeto nombrado

Nuestros "amigos" en Microsoft tienen a video describing IE's developer tool. A las 3:03 es cuando mencionan esta forma "fácil" de explorar objetos.

+2

Eso está bien si está depurando scripts de página ... Pero si está ejecutando código arbitrario en la consola y desea investigar los resultados directamente, no puede establecer ningún punto de interrupción. Desafortunadamente, Microsoft tiene una perspectiva muy irreal de lo que deberían ser las herramientas de desarrollo útiles ... –

3

Prueba esto en la ventana de instrucciones de la consola:

for (var a in object) { 
    console.log("object["+a+"]="+object[a]) 
} 

Por ejemplo,

for (var a in document.head){ 
    console.log("document.head["+a+"]="+document.head[a]) 
} 
+1

Eso funciona para un solo nivel pero no atraviesa todo el objeto ... Lo viste [mi comentario] (http: // stackoverflow .com/questions/4552944/displaying-objects-in-ie-developer-tools-console/11302451 # comment4993853_4553069) en la respuesta aceptada que atraviesa objetos por completo, ¿no? –

6

Trate console.dir(/*object*/); Esto debe darle un poco más de detalle en el ejemplo.

+2

¿Es esto una broma? 'dir' no es compatible. Pero puedo usar 'log' que muestra' LOG: [Object Object] 'en lugar de' {...} 'en IE8, que es mucho más * útil * lo admito. :) Pero es cierto que no sé lo que IE9 muestra o incluso IE10. O su soporte para 'dir' tampoco. Sospecho que podrían ser más * inteligentes * de lo contrario, todo esto solo prueba una cosa: ** MS no usa IE para depurar aplicaciones web **. –

+4

No, no es una broma. Debo aclarar que esto solo se admite en ie9 y versiones superiores. También podría ejecutar ie9 en modos de navegador más antiguos para obtener una idea de los problemas que podría estar experimentando. No reemplaza las pruebas en navegadores más antiguos, pero puede ser más fácil encontrar errores con las mejores herramientas de desarrollador disponibles en IE9. –

+0

Menos broma que tu respuesta aceptada, supongo. – Rolf

20

Utilizo el objeto JSON incorporado.

JSON.stringify(my_object) 
+0

Suponiendo que esté disponible (que para mí lo fue), esta es una solución mucho más agradable :-) –

+0

esto no muestra todas las propiedades. si tiene un objeto complejo, parece que solo muestra propiedades estáticas. Es decir, si una propiedad es una función, parece quedar fuera aquí. – Carnix

+0

Esta solución también funciona muy bien con Toastr. – soulia

0

Agregue el objeto a mirar y puede verlo y analizarlo completamente desde el panel de reloj.

1

Aquí hay una forma bastante sencilla de hacerlo ... ejecuta el objeto a través de JSON.stringify y muestra los resultados de eso en su lugar.

0

Lo que funciona para mí y esto puede ser algo que hayan agregado recientemente pero después de que hagas clic en el registro de la consola. Borre el registro pero deje la consola abierta y luego actualice la página.A medida que la página se carga, debería poder explorar los objetos. No estoy seguro de por qué debe hacerse de esa manera, pero parece funcionar.

+0

Espero que en 2017 no utilice IE8, que solo tenía herramientas de desarrollo rudimentarias. Las herramientas de hoy en día han evolucionado mucho y hacen lo que se supone que deben hacer. –

Cuestiones relacionadas