Monitorea los Ajax HttpRequests con Fiddler

Como programador de sitios web basados en Ajax, tiendo a necesitar una herramienta que me permita verificar exactamente que le envió al server en un XmlHttpRequest vía Ajax. Los parámetros que van en el request, la URL a la que lo envió, la respuesta recibida etc. Así puedo determinar si un error se genero porque se enviaron datos erróneos al server desde el Ajax Request o si fue el server quien interpreto o proceso mal los datos.

Mi herramienta para realizar estos monitoreos fue Firebug, un add-on para Firefox que te permite depurar Javascript, inspeccionar/manipular el DOM y también inspeccionar/manipular los estilos de un sitio. Este además visualiza en su consola los diferentes HttpRequests que se hacen al server.

Como muchos sabrán, no siempre basta con realizar pruebas y depuraciones de tu sitio usando el browser Firefox ya que comúnmente los errores ser producen al navegar en tu sitio desde Internet Explorer o algún otro y como hasta donde he podido investigar, ningún otro navegador cuenta con un add-on como el de Firefox para visualizar estas peticiones de Ajax, no hay otra manera de hacerlo mas que con una herramienta externa al browser.

Buscando en la web encontré la herramienta llamada Fiddler. Este es un proxy web hecho con el framework Microsoft.Net para captura y depuración del trafico http que se genera en tu computadora. Este trafico es comúnmente generado por los browsers al navegar dentro de sitios web, dar click sobre algun hipervinculo de alguna pagina o cuando un evento javascript dispara un request XmlHttp.

"Captura de pantalla de Fiddler, monitoreando el trafico http local. Visualizando en la parte derecha el detalle de un Ajax Request de la pagina de twitter.com"

Como pueden ver en la captura de pantalla, Fiddler estomáticamente captura todos los requests http y los lista en la columna de la izquierda, mostrando los detalles de cada request en la columna de la izquierda, como por ejemplo los headers de la petición, parámetros y la respuesta obtenida.

Hay un pequeño problema con Fiddler cuando intentas monitorear el trafico de un server alojado en tu localhost. Esto es porque, como ellos mismos mencionan en su sitio: "Internet Explorer and the .NET Framework are hardcoded not to send requests for Localhost through any proxies" por lo cual, nos vemos en la necesidad de no utilizar la palabra "localhost" ni su IP equivalente 127.0.0.1 para acceder desde nuestro browser a los sitios alojados en nuestro server. Como alternativa podemos usar en su lugar, el nombre de nuestro equipo. Por ejemplo:

en lugar de:

http://localhost:8080/miSitioWeb/index.jsp

tenemos que escribir:

http://laptux:8080/miSitioWeb/index.jsp

Asumiendo que el nombre de mi equipo es "laptux".

firefox firebug javascript ajax fiddler internet explorer

Monitorea los Ajax HttpRequests con Fiddler

Como programador de sitios web basados en Ajax, tiendo a necesitar una herramienta que me permita verificar exactamente que le envió al server en un XmlHttpRequest vía Ajax. Los parámetros que van en el request, la URL a la que lo envió, la respuesta recibida etc. Así puedo determinar si un error se genero porque se enviaron datos erróneos al server desde el Ajax Request o si fue el server quien interpreto o proceso mal los datos.

Mi herramienta para realizar estos monitoreos fue Firebug, un add-on para Firefox que te permite depurar Javascript, inspeccionar/manipular el DOM y también inspeccionar/manipular los estilos de un sitio. Este además visualiza en su consola los diferentes HttpRequests que se hacen al server.

Como muchos sabrán, no siempre basta con realizar pruebas y depuraciones de tu sitio usando el browser Firefox ya que comúnmente los errores ser producen al navegar en tu sitio desde Internet Explorer o algún otro y como hasta donde he podido investigar, ningún otro navegador cuenta con un add-on como el de Firefox para visualizar estas peticiones de Ajax, no hay otra manera de hacerlo mas que con una herramienta externa al browser.

Buscando en la web encontré la herramienta llamada Fiddler. Este es un proxy web hecho con el framework Microsoft.Net para captura y depuración del trafico http que se genera en tu computadora. Este trafico es comúnmente generado por los browsers al navegar dentro de sitios web, dar click sobre algun hipervinculo de alguna pagina o cuando un evento javascript dispara un request XmlHttp.

"Captura de pantalla de Fiddler, monitoreando el trafico http local. Visualizando en la parte derecha el detalle de un Ajax Request de la pagina de twitter.com"

Como pueden ver en la captura de pantalla, Fiddler estomáticamente captura todos los requests http y los lista en la columna de la izquierda, mostrando los detalles de cada request en la columna de la izquierda, como por ejemplo los headers de la petición, parámetros y la respuesta obtenida.

Hay un pequeño problema con Fiddler cuando intentas monitorear el trafico de un server alojado en tu localhost. Esto es porque, como ellos mismos mencionan en su sitio: "Internet Explorer and the .NET Framework are hardcoded not to send requests for Localhost through any proxies" por lo cual, nos vemos en la necesidad de no utilizar la palabra "localhost" ni su IP equivalente 127.0.0.1 para acceder desde nuestro browser a los sitios alojados en nuestro server. Como alternativa podemos usar en su lugar, el nombre de nuestro equipo. Por ejemplo:

en lugar de:

http://localhost:8080/miSitioWeb/index.jsp

tenemos que escribir:

http://laptux:8080/miSitioWeb/index.jsp

Asumiendo que el nombre de mi equipo es "laptux".

firefox firebug javascript ajax fiddler internet explorer

Trabajando con Google Web Toolkit y Google App Engine

"Logotipo del framework Google App Engine"

Habiendo salido de mi tesis recientemente, me he interesado en buscar hobbies relacionados con programación y en plasmar muchas ideas de software que vinieron a mi cabeza mientras estaba ocupado haciendo el trabajo de grado. Uno de los inconvenientes que tenemos los desarrolladores Java es que no existen en internet tantas alternativas para hosting de aplicaciones así como la gran variedad disponible para el Stack LAMP (Linux/Apache/Mysql/PHP).

Además, cada programador Java está acostumbrado a trabajar con su propio Stack y es bastante diversa la gama de combinaciones que se pueden armar entre sistema operativo, application server y framework para el entorno visual así como la base de datos y el framework para la persistencia de los datos, esto sin mencionar las versiones de cada una de estas soluciones informáticas. Esto hace aun mas difícil encontrar entornos (pagados o gratuitos) donde alojar nuestras aplicaciones web a menos que nos decidamos a montar nuestro propio server.

Buscando en internet me dí cuenta que Google ofrece una alternativa sencilla y barata (gratuita hasta cierto punto) para alojar aplicaciones desarrolladas con Java: Google App Engine.

Este servicio de google te permite desarrollar aplicaciones relativamente sencillas y hostearlas dentro de los servidores que ellos mismos te ofrecen. Eso si, no puede ser cualquier tipo de aplicación y lo mejor sería desarrollar aplicaciones orientadas a esta plataforma de Google, ya que estos ya te ofrecen la alternativa para la persistencia de los datos y los frameworks visuales a utilizar.

La ventaja es que el soporte se ve bastante decente (te brindan un plugin para Eclipse que te hace la mayor parte del trabajo de configuración y el upload de tu aplicación) además que la documentación te explica el framework de una manera bastante sencilla. En la galería de aplicaciones puedes ver las aplicaciones que otros ya han publicado, notando que algunas pueden ser bastante complejas y de un acabado muy profesional.

Lo único a tener en cuenta es que nada mas puedes subir 10 aplicaciones como máximo, y no puedes borrar una aplicación que ya has subido al server de Google.

Otro tema que me llamó la atención al navegar entre las soluciones de desarrollo de google fue el GWT, Google Web Toolkit. Este es un framework visual para apps web que te permite desarrollar aplicaciones sin la necesidad de escribir HTML o Javascript, generándolo todo desde clases Java. Es un framework bastante joven comparado con JSF, Struts o Tapestry pero teniendo el respaldo de google puede llegar lejos, ademas la idea de no escribir HTML será un alivio para muchos desarrolladores web que no saben mucho de estructuración y decoración de sitios web con HTML/CSS y desean una solución rápida y sencilla para sus interfaces. Al igual que con el App Engine Framework, Google apuesta nuevamente por eclipse brindando soporte para la creación de proyectos de GWT mediante asistentes y el uso de un navegador embedido que te permite realizar pruebas de tus aplicaciones sin necesidad de hacer deploy.

"Aplicación de ejemplo de uso de GWT, creada a partir de un proyecto web de eclipse con el plugin de GWT y App Engine. En la captura pueden apreciar el browser embedido que incluye el framework de GWT."

Cabe mencionar que GWT puede ser usado nada más para generar el HTML/Javascript de un sitio, usando cualquier otro lenguaje de programación del lado del server. Como ellos bien lo mencionan, este puede ser usado para generar front-ends en aplicaciones Ruby, Python, etc. Además es full Ajax-enabled trabajando de forma transparente con invocaciones a código del lado del servidor hecho con Java y mediante el uso de XML-RPC para otros lenguajes.

ajax appengine framework google java ruby python linux

Trabajando con Google Web Toolkit y Google App Engine

"Logotipo del framework Google App Engine"

Habiendo salido de mi tesis recientemente, me he interesado en buscar hobbies relacionados con programación y en plasmar muchas ideas de software que vinieron a mi cabeza mientras estaba ocupado haciendo el trabajo de grado. Uno de los inconvenientes que tenemos los desarrolladores Java es que no existen en internet tantas alternativas para hosting de aplicaciones así como la gran variedad disponible para el Stack LAMP (Linux/Apache/Mysql/PHP).

Además, cada programador Java está acostumbrado a trabajar con su propio Stack y es bastante diversa la gama de combinaciones que se pueden armar entre sistema operativo, application server y framework para el entorno visual así como la base de datos y el framework para la persistencia de los datos, esto sin mencionar las versiones de cada una de estas soluciones informáticas. Esto hace aun mas difícil encontrar entornos (pagados o gratuitos) donde alojar nuestras aplicaciones web a menos que nos decidamos a montar nuestro propio server.

Buscando en internet me dí cuenta que Google ofrece una alternativa sencilla y barata (gratuita hasta cierto punto) para alojar aplicaciones desarrolladas con Java: Google App Engine.

Este servicio de google te permite desarrollar aplicaciones relativamente sencillas y hostearlas dentro de los servidores que ellos mismos te ofrecen. Eso si, no puede ser cualquier tipo de aplicación y lo mejor sería desarrollar aplicaciones orientadas a esta plataforma de Google, ya que estos ya te ofrecen la alternativa para la persistencia de los datos y los frameworks visuales a utilizar.

La ventaja es que el soporte se ve bastante decente (te brindan un plugin para Eclipse que te hace la mayor parte del trabajo de configuración y el upload de tu aplicación) además que la documentación te explica el framework de una manera bastante sencilla. En la galería de aplicaciones puedes ver las aplicaciones que otros ya han publicado, notando que algunas pueden ser bastante complejas y de un acabado muy profesional.

Lo único a tener en cuenta es que nada mas puedes subir 10 aplicaciones como máximo, y no puedes borrar una aplicación que ya has subido al server de Google.

Otro tema que me llamó la atención al navegar entre las soluciones de desarrollo de google fue el GWT, Google Web Toolkit. Este es un framework visual para apps web que te permite desarrollar aplicaciones sin la necesidad de escribir HTML o Javascript, generándolo todo desde clases Java. Es un framework bastante joven comparado con JSF, Struts o Tapestry pero teniendo el respaldo de google puede llegar lejos, ademas la idea de no escribir HTML será un alivio para muchos desarrolladores web que no saben mucho de estructuración y decoración de sitios web con HTML/CSS y desean una solución rápida y sencilla para sus interfaces. Al igual que con el App Engine Framework, Google apuesta nuevamente por eclipse brindando soporte para la creación de proyectos de GWT mediante asistentes y el uso de un navegador embedido que te permite realizar pruebas de tus aplicaciones sin necesidad de hacer deploy.

"Aplicación de ejemplo de uso de GWT, creada a partir de un proyecto web de eclipse con el plugin de GWT y App Engine. En la captura pueden apreciar el browser embedido que incluye el framework de GWT."

Cabe mencionar que GWT puede ser usado nada más para generar el HTML/Javascript de un sitio, usando cualquier otro lenguaje de programación del lado del server. Como ellos bien lo mencionan, este puede ser usado para generar front-ends en aplicaciones Ruby, Python, etc. Además es full Ajax-enabled trabajando de forma transparente con invocaciones a código del lado del servidor hecho con Java y mediante el uso de XML-RPC para otros lenguajes.

ajax appengine framework google java ruby python linux